Slider
Range input with keyboard support. Supports min, max, step, and multiple thumbs.
Install
Import path
Examples
Range (two thumbs)
Pass an array of two values to get a min–max range, e.g. a price filter.
Controlled
An input where the user selects a value from within a given range.
Disabled
Use the disabled prop to disable the slider.
Multiple Thumbs
Use an array with multiple values for multiple thumbs.
RTL
Right-to-left layout support for languages such as Arabic and Hebrew.
Translations are AI-generated for demonstration and may be imperfect.
Vertical
Use orientation='vertical' for a vertical slider.
Anatomy
How the parts compose. Copy this skeleton and fill in the slots.
import { Slider } from "@codefast/ui/slider";
// single
<Slider value={[60]} onValueChange={setValue} max={100} />
// range — two thumbs
<Slider value={[200, 700]} onValueChange={setRange} max={1000} />
API reference
Props for each part of the component. All native element props are also forwarded.
Slider
Built on Radix Slider. The number of thumbs follows the length of value.
| Prop | Type | Default | Description |
|---|---|---|---|
| value / onValueChange | number[] / (value: number[]) => void | — | Controlled thumb positions. Two entries render a range. |
| defaultValue | number[] | — | Initial positions when uncontrolled. |
| min / max | number | 0 / 100 | Bounds of the track. |
| step | number | 1 | Granularity the thumb snaps to. |
| orientation | "horizontal" | "vertical" | "horizontal" | Axis of the slider. |
Accessibility
Built to be keyboard-navigable and screen-reader friendly out of the box.
| Key | Function |
|---|---|
| Tab | Moves focus between thumbs. |
| Arrow+Right | Increases the focused thumb by one step. |
| Arrow+Left | Decreases the focused thumb by one step. |
| Home | Sets the thumb to its minimum. |
| End | Sets the thumb to its maximum. |
- Each thumb is a slider role with aria-valuenow / valuemin / valuemax set automatically.
- Give the Slider an aria-label (or aria-labelledby) so the purpose is announced.
- Pair with a visible readout so the current value is not conveyed by position alone.
Guidelines
Conventions that keep usage consistent across an app.
Do
- Show the current value (or range) near the slider.
- Pick a step that matches the precision users actually need.
Don’t
- Don’t use a slider for precise numeric entry — use Input Number.
- Don’t hide which thumb is which in a range without labels or a readout.