Theme
Slider
A value in a range, or a range with two thumbs.
Examples
Props
Slider
A value in a range, set by dragging or with the arrow, Page and Home/End keys. Two values make a range.
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | — |
Also takes 87 props it passes to the underlying React Aria component or element (events, ARIA attributes, state such as isDisabled), documented by React Aria.
Keyboard
| Key | Does |
|---|---|
| ArrowLeft or ArrowRight | Steps the value (mirrored in right-to-left text) |
| PageUp or PageDown | Steps by a larger amount |
| Home or End | Goes to the minimum or maximum |
Accessibility
- Each thumb is a native range input, labelled and announced with its formatted value.