Slider
Allows users to choose a numeric value or range smoothly by sliding a handle along a horizontal track with immediate visual feedback.
Installation
pnpm dlx shadcn@latest add @spaceui/primitives-sliderUsage
import { Slider, SliderValue } from '@/components/ui/slider'<Slider />Anatomy
<Slider>
<SliderTrack>
<SliderRange />
</SliderTrack>
<SliderThumb />
</Slider>Features
Range Slider
Multi-thumb range slider for selecting value intervals.
Vertical Orientation
Vertical slider orientation with orientation="vertical".
Disabled State
Slider rendered in a disabled state.
Accessibility
- Follows the WAI-ARIA Slider Pattern.
Keyboard Interactions
| Key | Action |
|---|---|
| ArrowRight / ArrowUp | Increases the slider value. |
| ArrowLeft / ArrowDown | Decreases the slider value. |
| Home | Sets the slider to the minimum value. |
| End | Sets the slider to the maximum value. |
API Reference
Slider
Root component. Styled wrapper for Slider.Root from Base UI with default min/max values and edge-aligned thumbs.
| Prop | Type | Default | Description |
|---|---|---|---|
defaultValue | number|readonly number[] | - | The initial uncontrolled value (single number or array) |
value | number|readonly number[] | - | The controlled value (single number or array for range) |
min | number | 0 | Minimum value of the slider |
max | number | 100 | Maximum value of the slider |
Note: The component sets thumbAlignment="edge" by default, which aligns thumbs to the edge of the track rather than centering them.
SliderValue
Displays the current value. Styled wrapper for Slider.Value from Base UI.
Examples
Related Components
Liquid fill slider with viscosity, momentum, and tilt.
ViewA continuous slider with a filled track, tick dots, and a draggable thumb.
ViewA scrubber drawn as a row of tick marks, with a real range input underneath for keyboard and screen reader support.
View