Slider
Pick a value along a range.
Usage
Slider uses value + onValueChange instead of bind:value. Update your state variable inside the callback. Always set thumbLabel so the thumb has an accessible name.
Range
Pass type="multiple" and an array as value to
render a two-handle range slider. The callback receives number[].
Props
The component also forwards all native slider attributes via prop spreading.
| Prop | Type | Default |
|---|---|---|
type | 'single' | 'multiple' | 'single' |
value Current value(s). NOT bindable — read changes through `onValueChange`. | number | number[] | — |
onValueChange Called when the value changes. This is how you track the slider. | (value: number & number[]) => void | — |
min Minimum value. | number | — |
max Maximum value. | number | — |
step Step increment. | number | — |
disabled | boolean | — |
orientation | 'horizontal' | 'vertical' | — |
thumbLabel Accessible name for the thumb(s). The `role="slider"` element needs a name; in `multiple` mode each thumb gets the label suffixed with its position. | string | — |
class Extra classes merged onto the root. | string | — |