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 | — |
invalid Marks the control as failing validation. Always applies the invalid styling. Does NOT set `aria-invalid`: this renders as `container; the thumb is the slider`, and ARIA does not support the attribute there, so assistive technology is free to ignore it. axe does NOT flag it either way — verified by injecting it and watching the suite still pass — so this is a decision taken from the spec, not one a tool enforces. The accessible signal comes from `Field` wiring the error message through `aria-describedby`. Prefer letting `Field` drive this: passing `Field` an `error` is what makes a field invalid, so the message the user reads and the state of the control cannot disagree. | boolean | false |
required Marks the control as required. Lands on the thumb, which is the `role="slider"` element — the container this component renders is not the slider, so the attribute would be inert there. A native `required` attribute is inert on both. | boolean | false |
class | string | — |