ComponentsForm
Slider
A draggable range input for selecting numeric values. Built on Radix UI.
Default
Range (Two Thumbs)
With Step
Disabled
Installation
npx visor add sliderThis copies two files into your project:
components/ui/slider/slider.tsx— the componentcomponents/ui/slider/slider.module.css— the styles
Usage
import { Slider } from '@/components/ui/slider/slider';
<Slider defaultValue={[50]} max={100} step={1} />API Reference
SliderProps
| Prop | Type | Default | Description |
|---|---|---|---|
value | number[] | — | Controlled value(s). Use an array for range sliders. |
defaultValue | number[] | — | Default value(s) for uncontrolled usage. |
min | number | 0 | Minimum value. |
max | number | 100 | Maximum value. |
step | number | 1 | Step increment between values. |
onValueChange | (value: number[]) => void | — | Callback when the value changes. |
Sub-components
Slider exports a single component that internally composes Radix UI primitives:
| Component | Element | Purpose |
|---|---|---|
Slider | <span> (Radix Root) | Root container managing value state and keyboard interaction |
| Slider.Track | <span> | Horizontal track representing the full range |
| Slider.Range | <span> | Filled portion of the track indicating the current value |
| Slider.Thumb | <span> | Draggable handle(s) with role="slider" for each value |
Accessibility
- Built on
@radix-ui/react-sliderwith full WAI-ARIA slider semantics - Each thumb renders with
role="slider",aria-valuemin,aria-valuemax, andaria-valuenow - Provide
aria-labelon<Slider>or usearia-labelledbypointing to a visible label - Keyboard: Arrow keys adjust value by
step; Home/End jump to min/max; Page Up/Down adjust by larger increments - For range sliders, each thumb is independently focusable and operable