Slider
Sliders allow users to select a value within a range, with support for marks, colors, sizes, and controlled/uncontrolled usage.
Basic
Uncontrolled slider with default value.
60
Controlled
Use value and onChange to fully control the slider state.
40
Colors
Four color variants for different semantic contexts.
60
75
45
30
Sizes
Three sizes: sm, md (default), and lg.
50
50
50
With Marks
Add marks to highlight specific values along the track.
50
0
25
Mid
75
Max
Real-world: Recipe Nutrition
Adjust nutritional targets with controlled sliders inside a card.
🥗 Daily Nutrition Goals
1200
80
150
| Prop | Type | Default | Description |
|---|---|---|---|
value | number | — | Controlled value. |
defaultValue | number | 0 | Initial value for uncontrolled usage. |
min | number | 0 | Minimum allowed value. |
max | number | 100 | Maximum allowed value. |
step | number | 1 | Increment step between values. |
label | string | — | Label shown above the track. |
showValue | boolean | true | Display the current value as a badge. |
disabled | boolean | false | Disables interaction. |
size | "sm" | "md" | "lg" | "md" | Track and thumb size. |
color | "primary" | "success" | "warning" | "error" | "primary" | Fill color of the slider. |
marks | SliderMark[] | — | Array of { value, label? } objects for tick mark indicators. |
onChange | (value: number) => void | — | Callback fired when the value changes. |