Slider
A range input with draggable thumbs. Supports single value, ranges (two thumbs), custom steps, and full keyboard control.
Volume33%
Price range$20 – $80
Stepped (step = 10)
Disabled
Installation
pnpm
pnpm dlx @hex-core/cli add sliderRange slider
Two-thumb range
tsx
<Slider defaultValue={[20, 80]} max={100} step={1} />API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
value | object | — | Controlled array of thumb values (number[]), e.g. [50] for single, [20, 80] for range |
defaultValue | object | — | Default array of thumb values (number[]) for uncontrolled usage |
onValueChange | function | — | Callback on value change: (value: number[]) => void |
min | number | 0 | Minimum value |
max | number | 100 | Maximum value |
step | number | 1 | Step interval between valid values |
disabled | boolean | false | Disable the slider |
orientation | "horizontal" | "vertical" | horizontal | Slider direction |
AI Guidance
When to use
Use for continuous numeric inputs with a known range: volume, brightness, price range filter, opacity. Pair value with a visible number display when the exact value matters.
When not to use
Don't use when the user needs to enter an exact number (use Input type=number). Don't use for discrete choices (use Select or RadioGroup).
Common mistakes
- Using Slider for exact values without showing the number
- Missing min/max bounds
- Using step=1 for fractional values (set step=0.01)
- Not providing aria-label when there's no visible label
Accessibility
Arrow keys step by step, Home/End jump to min/max, PageUp/PageDown step larger. Radix handles aria-valuemin/max/now. Add aria-label if no visible label.
Related components
Token budget: 450