Draggable Rating

A star rating input that responds to both hover and drag, with a live text label (Terrible to Excellent) and a satisfying scale-up pop while dragging.

draggable-rating-preview

Okay

Why it helps: Standard star ratings only support discrete clicks. Drag support feels more tactile and mirrors what people expect from modern review widgets.

Source

components/live/DraggableRating.tsx

Usage

example.tsx

Props

className

string

Optional CSS class for root container

max

number

Number of stars (default 5)

labels

string[]

Array of labels corresponding to each rating value

initialRating

number

Initial rating value

submitLabel

(rating: number) => string

Custom function to format submitted rating text