Components
Slider
A range input control for selecting a numeric value within a defined range.
Installation
npx asteria-ui add sliderUsage
import { Slider } from "@/components/ui/slider";
<Slider aria-label="Volume" defaultValue={[40]} />Examples
Sizes
States
API reference
| Prop | Type | Default | Description |
|---|---|---|---|
| size | "sm" | "md" | "lg" | "md" | Track/thumb size. |
| error | boolean | false | Shows the track fill and thumb in the error color. |
| defaultValue | number[] | — | Uncontrolled initial value — a single-element array for one thumb. |
| value | number[] | — | Controlled value — pair with onValueChange. |
| min | number | 0 | Minimum value. |
| max | number | 100 | Maximum value. |
| step | number | 1 | Increment per keyboard/drag step. |
| disabled | boolean | false | Prevents interaction. |
Accessibility
Accessibility
Role. The thumb carries
role="slider"witharia-valuenow,aria-valuemin,aria-valuemax. Always passaria-labeloraria-labelledby.Keyboard. Arrow keys adjust by
step. Page Up/Down move by a larger increment. Home/End jump to min/max.Touch target. The thumb's hit area meets the 44×44px minimum on mobile even though its visible size is smaller.
Focus ring. Visible on Tab via
shadow-glow-focus.
When to use
Use for selecting a value in a continuous range — volume, brightness, price range. Best when exact value matters less than relative position.
Do:
- Show the current value
- Define clear min/max labels
- Use step increments for discrete values
Don't:
- Use for precise entry — use Input instead
- Make the track too short to use accurately
- Combine with an input field without keeping them in sync
Related components
- Input — for precise numeric entry
- Progress Bar — for read-only progress
- Field — for a labeled slider