Slider
shadcn/ui
Range input — pick a single value or a range with one or two thumbs.
@/components/ui/sliderStates
| State | Preview | Token |
|---|---|---|
| Default (50) | bg-primary thumb · bg-secondary track | |
| At min (0) | Track fill = 0%, thumb at start | |
| At max (100) | Track fill = 100%, thumb at end | |
| Range | Two thumbs — value is number[2] | |
| Stepped | step={20} — snaps to 0,20,40,60,80,100 | |
| Disabled | opacity-50 cursor-not-allowed |
Live demos
Single value50
Range (two thumbs)25 – 75
In context — rows per page setting
Table settings
Rows per page25
10100
Props
| Prop | Type | Description |
|---|---|---|
| defaultValue | number[] | Initial value(s) — uncontrolled |
| value | number[] | Controlled value(s) |
| onValueChange | function | (value: number[]) => void — fires while dragging |
| onValueCommit | function | (value: number[]) => void — fires on pointer release |
| min | number | Minimum value (default: 0) |
| max | number | Maximum value (default: 100) |
| step | number | Snap interval (default: 1) |
| disabled | boolean | Prevents interaction, reduces opacity |
| orientation | "horizontal" | "vertical" | Track direction (default: horizontal) |
Value is always number[] — single thumb: [50], range: [25, 75].
On this page