Mood Slider

Pro

Mood slider with a little character that reacts as you drag: sleepy and squashed at the low end, tall and bright at the top. It snaps to the nearest mood when you let go.

Preview

Installation

npx @lumioui/cli add pro/mood-slider

Usage

import { MoodSlider } from "@/components/ui/mood-slider/mood-slider";
<MoodSlider />

Examples

Check-in

An evening journal check-in.

Rating

The CSAT card at the end of a support chat.

API reference

Prop Type Default
value number

Controlled value, 0..1.

 —
defaultValue number

Uncontrolled initial value, 0..1. Default 0.5.

 0.5
onValueChange (value: number) => void

Fires with the state-aligned value (index / (states - 1)) each time the thumb crosses into a new state, and on release. Never per frame.

 —
onValueCommit (value: number) => void

Fires once on release with the snapped (state-aligned) value.

 —
states MoodState[]

Two or more states, ordered low → high. Default unhappy / neutral / happy.

 DEFAULT_STATES
showLabel boolean

Show the active state's label under the track. Default true.

 true
character boolean

Show the character above the track. Default true.

 true
nod number

Bump (e.g. increment) when the answer is saved: the character nods and its light brightens once, then settles. 0 never fires.

 0
label string

Accessibility name of the slider. Default "Mood".

 "Mood"
disabled boolean —
className string —