Emoji Rating Slider: Free React + Tailwind Component

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.

Bring this into your project

Run this command in your project folder. The CLI adds the source and dependencies; then follow the usage example below.

npx webberui@latest add emoji-rating-slider.en

New project or installation trouble? Start here →

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

import * as React from "react";

export default function Example() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">

Active edited usageDefault props

<EmojiRatingSlider/>

    </div>
  );
}

The complete example includes the preview layout and data. Install the component first, then paste this file into your project.

Installation

npx webberui@latest add https://webberui.com/r/emoji-rating-slider.en.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`	`"Satisfaction Rating"`	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

Emoji Rating Slider