Emoji Rating Slider
A beautifully animated 0–5 rating widget with spring-physics drag, expressive emoji transitions, and fully customisable controls. Drop it into any Framer project in seconds.
Spring Physics
Animated Faces
Drag to Rate
Fully Customisable
15+ Controls
Live Preview
Pop · Light · Static
Flip · Glass · Breathe
Spin · Neon · Pulse
Bounce · Aurora · Rainbow
Slide · Dark · Static
Bounce · Light · Rainbow
Spin · Glass · Pulse
Flip · Neon · Breathe
Spin · Aurora · Static
Slide · Dark · Rainbow
Bounce · Dark · Pulse
Slide · Glass · Breathe
Everything Included
One component. Every control you need.
Expressive Emojis
6 animated emoji states smoothly transition as users drag the slider.
Spring Physics
Buttery-smooth drag with Framer Motion spring physics and snap-on-release.
15+ Controls
Customise colors, title, radius, size, shadow, min/max labels and more.
Drag Interaction
Native drag with live fill, animated thumb, and colored tick marks.
onChange Event
Fire on change events to connect to forms, analytics, or other components.
Copy & Paste Ready
Drop onto any Framer page. No external dependencies or manual config.
About This Component
The last rating widget you’ll ever need.
Rating Slider is a production-ready Framer component built for teams that care about the details. Drag the thumb to rate from 0 to 5 — the face reacts instantly with spring-physics animation, the filled track follows in real time, and everything snaps cleanly on release. Drop it into any project, wire up the onChange event, and ship in minutes.
What’s Included
1 fully interactive code component (.tsx)
5 themes: Light, Glass, Dark, Aurora, Neon
5 face animations: Pop, Flip, Bounce, Spin, Slide
4 color modes: Static, Pulse, Breathe, Rainbow
15+ property controls — all editable from Framer
Spring physics drag with real-time fill sync
onChange event handler for form & analytics wiring
Zero external dependencies — Framer-native
Perfect For
🛍️ Post-purchase feedback forms
📝 NPS & customer satisfaction surveys
🎓 Course & content rating widgets
🏨 Hotel & restaurant review flows
📱 App onboarding & experience surveys
💼 Employee pulse checks & mood tracking
🎮 In-game or interactive prototype ratings
How to Use
1
Copy the Component
Open your Framer project, go to Assets → Components and paste the Rating Slider directly from the marketplace.
2
Drag onto Your Page
Drag the component onto any canvas frame. Pick a theme, choose your accent colour, and set the animation style from the right panel.
3
Wire & Publish
Connect the “On Change” event to a form, CMS variable, or analytics trigger — then publish. No extra code needed.
Compatibility & Requirements
Framer (any plan)
No external libraries
Works on Desktop & Mobile
Copy & paste ready
Full TypeScript source included
Made with ❤️ for the Framer Community · Free to use & remix