Emoji Rating Slider

Drag the slider and the face morphs from crying to hearts, deforming with the value.

As you drag the slider, the SVG face's mouth corners, eyebrows, and eyes interpolate and deform live with the value: low scores cry with tears, the middle is flat, and high scores burst into starry eyes and floating hearts, while the accent colour shifts from red to green in step — a good fit for satisfaction surveys and feedback forms.

Loading preview…

npx shadcn@latest add https://webberui.com/r/emoji-rating-slider.json

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

Initial scoredefaultValue

Emoji sizefaceSize

132

<EmojiRatingSlider />

Installation

npx shadcn@latest add https://webberui.com/r/emoji-rating-slider.json

Or, once registries are configured in components.json, install it as @webberui/emoji-rating-slider.

Usage

import { EmojiRatingSlider } from "@/components/ui/emoji-rating-slider";

export function FeedbackCard() {
  const [score, setScore] = React.useState(72);

  return <EmojiRatingSlider value={score} onChange={setScore} />;
}

Props

Prop	Type	Default	Description
`value`	`number`	—	Controlled value (0–100); when omitted, it runs in uncontrolled mode
`defaultValue`	`number`	`50`	Initial value in uncontrolled mode (0–100)
`onChange`	`(value: number) => void`	—	Callback for value changes; fires on both dragging and keyboard operation
`labels`	`string[]`	five built-in level labels	Level text labels (low to high), used for display and for the aria-valuetext announcement
`faceSize`	`number`	`132`	Width of the emoji face (px)
`ariaLabel`	`string`	`"滿意度評分"`	Accessible name of the slider
`className`	`string`	—	Forwarded to the outer container

Accessibility

Interaction is carried by a native input type="range", so arrow keys step through the values and Home/End jump to the ends
aria-valuetext announces the current state as "score + level label", for example "85, very satisfied"
The emoji face and the custom thumb are decorative and are hidden from assistive technology (aria-hidden)
When the user has "reduce motion" enabled at the system level, the spring smoothing and the looping tear and heart animations are turned off, and the face simply shows the matching state