Slider
Slider picks a number, or a range of two, along a rail. Drag a handle, press anywhere on the rail to jump there, or use the keyboard on a focused handle. Each handle is a role="slider".
Demos
Basic
Name the slider with aria-label or aria-labelledby; it goes to the handle.
Range
range adds a second handle and the value becomes [start, end]. Dragging one handle past the other swaps them, so the value always comes back in order.
Marks
marks labels values on the rail. A handle snaps to a mark as well as to step, so 37 is reachable with a step of 10.
Step
step sets the value grid, counted from min. Decimal steps snap without float noise.
Marks only
step="mark" allows only the values in marks.
Tooltip
The value shows above a handle while it is hovered, focused from the keyboard or dragged. formatTooltip formats it, showTooltip keeps it open, and tooltip={false} turns it off.
Vertical
vertical runs the rail from bottom to top. It is 200px tall; set height to change that.
Reverse
reverse puts the minimum at the other end.
Disabled
Controlled
Pass value and onUpdateValue to own the state. onUpdateValue fires on every change while dragging.
Accessibility
Each handle is a focusable role="slider" with aria-valuenow, aria-valuemin, aria-valuemax and aria-orientation. When formatTooltip returns a string or number, it is also the handle’s aria-valuetext. aria-label and aria-labelledby on the slider name its handles; a range’s handles add “start” and “end” (from the locale) to aria-label.
| Key | Action |
|---|---|
| Right / Up | One step up (Right follows the rail, so it is flipped by reverse and right-to-left text) |
| Left / Down | One step down |
| Page Up / Page Down | Ten steps up or down |
| Home / End | The minimum or the maximum |
The tooltip copies the value text and is hidden from assistive tech.
Props
| Name | Type | Default | Description | Version |
|---|---|---|---|---|
value | number | [number, number] | undefined | Current value when controlled. | Unreleased |
defaultValue | number | [number, number] | min, or [min, max] with range | Initial value when uncontrolled. | Unreleased |
onUpdateValue | (value: number | [number, number]) => void | undefined | Called with the new value while the slider moves; a range comes in order. | Unreleased |
range | boolean | false | Two handles that select [start, end]. | Unreleased |
min | number | 0 | The smallest value. | Unreleased |
max | number | 100 | The largest value. | Unreleased |
step | number | 'mark' | 1 | The value grid; 'mark' allows only the values in marks. | Unreleased |
marks | Record<number, ReactNode> | undefined | Labels on the rail, keyed by value. | Unreleased |
vertical | boolean | false | Runs from bottom to top. | Unreleased |
reverse | boolean | false | Puts the minimum at the other end. | Unreleased |
disabled | boolean | false | Disables the slider. | Unreleased |
keyboard | boolean | true | Lets the keys move a focused handle. | Unreleased |
tooltip | boolean | true | Shows the value while a handle is hovered, focused or dragged. | Unreleased |
showTooltip | boolean | false | Keeps the tooltip open. | Unreleased |
formatTooltip | (value: number) => ReactNode | undefined | Formats the tooltip; a string or number is also the aria-valuetext. | Unreleased |
Slider also accepts native div attributes and a ref. showTooltip works with range too. The tooltip is a bubble inside the handle rather than a Tooltip popup. Restyle the rail, fill and handle through the --r-slider-* tokens.