Slider
Lets users select a numeric value or range by dragging a handle along a track. Ideal for settings or filters.
50%
Code
Installation
npx shadcn@latest add sliderBasic Example
import { Slider } from "@/components/ui/slider"
const [value, setValue] = useState([50])
<Slider
value={value}
onValueChange={setValue}
max={100}
step={1}
/>Range Slider
const [range, setRange] = useState([20, 80])
<Slider
value={range}
onValueChange={setRange}
max={100}
step={1}
/>Reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| value | number[] | — | Current value(s). Single value or range |
| onValueChange | function | — | Callback when value changes |
| min | number | 0 | Minimum value |
| max | number | 100 | Maximum value |
| step | number | 1 | Step increment |
Range Slider
20% - 80%
Usage Guidelines
When to Use
Use sliders for selecting numeric values within a range, adjusting settings like volume, brightness, or filters. They provide immediate visual feedback and are intuitive for continuous value selection.
Sliders work well when the value range is meaningful and when you want users to see the relative position within the range. For discrete values, consider radio buttons or checkboxes instead.
Best Practices
- Show the current value near the slider
- Use appropriate min, max, and step values
- Provide clear labels indicating what the slider controls
- Consider showing min/max labels at the ends
- Use range sliders for selecting value ranges
Accessibility
Sliders are fully keyboard accessible. Users can navigate with arrow keys and adjust values with Home/End keys. Always provide labels and consider showing the current value in a way that's accessible to screen readers.
Use appropriate ARIA attributes to communicate the slider's role, value, and range. Ensure sufficient color contrast for the slider track and thumb.