Forms
Slider
Choose a number from a continuous range by dragging. Best when the rough magnitude matters more than the exact figure.
Not documented yet
This component ships in the design system and is fully supported. What is missing is the guidance around it: when to reach for it, the do and don't, and the accessibility notes. Until that is written, Storybook is the reference for variants, props and live controls.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
value | number[] | undefined | — | Controlled value(s), one entry per thumb — e.g. `[50]` for a single handle, `[25, 75]` for a range. |
defaultValue | number[] | undefined | [0] | Uncontrolled starting value(s), one entry per thumb; the number of entries also determines how many thumbs render. |
thumbLabels | string[] | undefined | — | Accessible name per thumb. Each thumb renders `role="slider"`, which WCAG requires to have a name — otherwise a screen reader announces a bare number. Defaults to `["Value"]` for one thumb and `["Minimum", "Maximum"]` for two. Override with something specific, e.g. `["Minimum claim", "Maximum claim"]`. |
min | number | undefined | — | — |
max | number | undefined | — | — |
inverted | boolean | undefined | — | — |
form | string | undefined | — | — |
dir | Direction | undefined | — | — |
asChild | boolean | undefined | — | — |
name | string | undefined | — | — |
disabled | boolean | undefined | — | — |
orientation | "horizontal" | "vertical" | undefined | — | — |
step | number | undefined | — | — |
minStepsBetweenThumbs | number | undefined | — | — |
onValueChange | ((value: number[]) => void) | undefined | — | — |
onValueCommit | ((value: number[]) => void) | undefined | — | — |