Slider
Range input for selecting a value within bounds
Category: inputs · WCAG 2.2-AA · form, range, input
Props
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | — | Text label for the control. |
min | number | 0 | Minimum allowed value. |
max | number | 100 | Maximum allowed value. |
step | number | 1 | Increment between allowed values. |
value | number | — | The controlled value. |
defaultValue | number | — | The initial value when uncontrolled. |
disabled | boolean | false | When true, disables the control and removes it from the tab order. |
ariaLabel | string | — | Invisible accessible name, for when a visible element outside this component already labels it and `label` would render that text a second time. ⚠ `label` on this component is **visible**; `IconButton.label`/`Sparkline.label` are invisible names, which is the prior that costs adopters a duplicated label. The raw DOM `aria-label` still wins over this. |
Design tokens
--cascivo-color-accent--cascivo-color-border-strong--cascivo-color-surface--cascivo-radius-full--cascivo-focus-ring
When to use
- Selecting a value within a continuous or stepped numeric range where approximate adjustment is fine
- Settings like volume, brightness, or opacity where dragging gives instant feedback
- When the bounds (min/max) matter more than entering an exact figure
When not to use
- A precise numeric value must be typed — use NumberInput
- Picking a discrete rating on a small scale where stars/icons read better — use RatingGroup
How to build an accessible Slider in React →
Examples
Basic
<Slider label="Volume" defaultValue={50} />Stepped
<Slider label="Rating" min={0} max={5} step={1} />Related components
- NumberInput — Use when an exact, typed numeric value is required
- RatingGroup — Use for small discrete rating scales rather than a continuous range