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 — use onValueChange. | number | number[] | — |
onValueChange Callback fired when the value changes. | (value: number & number[]) => void | — |
min Minimum value. | number | — |
max Maximum value. | number | — |
step Step increment. | number | — |
disabled | boolean | false |
orientation | 'horizontal' | 'vertical' | 'horizontal' |
thumbLabel Accessible name for the thumb (role="slider"). Suffixed with position in multiple mode. | string | — |
class Extra classes merged onto the root. | string | — |