# Mood Slider

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.

> Composed · Pro · Forms & Inputs — React Native, Expo Go compatible.

## Install

```bash
npx @lumioui/cli add pro/mood-slider
```

## Import

```tsx
import { MoodSlider } from "@/components/ui/mood-slider/mood-slider";
```

## Variants

- `check-in` — Check-in: `npx @lumioui/cli add pro/mood-slider-check-in`
- `rating` — Rating: `npx @lumioui/cli add pro/mood-slider-rating`

## Props

| Prop | Type | Notes |
| --- | --- | --- |
| `value?` | `number` | Controlled value, 0..1. |
| `defaultValue?` | `number` | Uncontrolled initial value, 0..1. Default 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. |
| `showLabel?` | `boolean` | Show the active state's label under the track. Default true. |
| `character?` | `boolean` | Show the character above the track. Default 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. |
| `label?` | `string` | Accessibility name of the slider. Default "Mood". |
| `disabled?` | `boolean` | — |
| `className?` | `string` | — |

Source: https://lumioui.com/components/mood-slider