Slider
Accessible React slider for a single value or a two-thumb range, with a live readout, custom formatting, sizes, and field wiring. Keyboard and RTL ready.
Pass a number for one thumb or number[] for a range. showValue adds a live readout and formatValue shapes it.
When to use
Use Slider when the exact number matters less than its position in a range, such as a budget bracket or a satisfaction score. Pass an array for a two-thumb range. If users must enter a precise value, pair it with NumberInput or use NumberInput alone.
Turn on showValue so the current value is visible without guessing.
Examples
Props
Props declared by Slider. Native attributes of the underlying element pass through.
| Prop | Type | Default | Description |
|---|---|---|---|
value | SliderValue | Controlled value. number → single thumb, number[] → one thumb each. | |
defaultValue | SliderValue | Uncontrolled initial value. Defaults to a single thumb at min. | |
onValueChange | (value: SliderValue) => void | Fires continuously while dragging. Shape mirrors value/defaultValue. | |
onValueCommit | (value: SliderValue) => void | Fires once on release (pointer up / keyboard commit). | |
label | react.ReactNode | Visible field label, associated to the thumb(s) via aria-labelledby. | |
helperText | react.ReactNode | Hint shown below the field. Hidden while an error message is showing. | |
errorMessage | react.ReactNode | Message shown below the field when error is true. | |
error | boolean | Marks the field invalid: sets aria-invalid and error styling. | |
size | "sm" | "md" | Control size. Scales rail, thumb, label, and helper text. Defaults to md. | |
showValue | boolean | Render the current value(s) as text beside the label. | |
formatValue | (value: number) => string | Formats each value for showValue and the thumb's aria-valuetext
(e.g. percentages or currency). | |
thumbLabels | [string, string] | Accessible names for the two range thumbs. Ignored for single thumbs.
Defaults to ['Minimum', 'Maximum']. | |
name | string | ||
disabled | boolean | ||
orientation | "vertical" | "horizontal" | ||
dir | Direction | ||
min | number | ||
max | number | ||
step | number | ||
minStepsBetweenThumbs | number | ||
inverted | boolean | ||
form | string |
Accessibility
Each thumb is a slider role with the current value exposed and aria-valuetext from formatValue, so a screen reader hears "25 percent" rather than a raw number. Arrow keys move by step, Page Up and Page Down move faster, and Home and End jump to the limits.
Name multiple thumbs with thumbLabels. The track flips in RTL so the arrow keys still feel natural.