Slider
An input where the user selects a value from within a given range. Perfect for settings, filters, and controls in React applications with Next.js, TypeScript, and Tailwind CSS.
You know how some settings just feel better as sliders than input boxes? Volume controls, brightness adjustments, price ranges - sliders give users that tactile feel of dragging to the right value instead of typing numbers.
Basic value selection
Simple slider for any numeric input:
Smooth dragging, keyboard support, and visual feedback. This free open source React component handles all the accessibility stuff so you can focus on what value you're collecting.
npx shadcn@latest add sliderWhy sliders beat number inputs
Sometimes dragging feels more natural than typing:
- Visual feedback - Users see the value change as they drag
- Range context - Shows min/max bounds clearly
- Touch friendly - Works great on mobile devices
- Precise control - Fine-tune with arrow keys after dragging
- Immediate validation - Can't go outside allowed range
- Better for relative values - Percentages, ratios, settings levels
Common slider patterns
Range selection
Pick minimum and maximum values:
Volume control
Audio controls with visual indicators:
Settings panel
Multiple related controls grouped together:
These cover the most common use cases - single values, ranges, and settings panels. Each pattern shows the current value so users know exactly what they're selecting.
Perfect for interactive controls
Works great for any numeric input where the range matters more than exact precision. Settings screens, filters, media controls, drawing tools, game settings. Much more engaging than a basic number input.
Built on Radix UI Slider primitive. Full TypeScript support. Styled with Tailwind CSS to match the shadcn design system.
API Reference
Slider
An input component that allows users to select a value from a range.
| Prop | Type | Default | Description |
|---|---|---|---|
value | number[] | - | The controlled value of the slider |
defaultValue | number[] | - | The default value when uncontrolled |
onValueChange | (value: number[]) => void | - | Event handler called when the value changes |
onValueCommit | (value: number[]) => void | - | Event handler called when the user stops dragging |
min | number | 0 | The minimum value for the slider |
max | number | 100 | The maximum value for the slider |
step | number | 1 | The step interval for the slider |
orientation | 'horizontal' | 'vertical' | 'horizontal' | The orientation of the slider |
disabled | boolean | false | Whether the slider is disabled |
inverted | boolean | false | Whether the slider is visually inverted |
className | string | - | Additional CSS classes |
Value handling
The slider always works with arrays to support both single values and ranges:
// Single value
const [value, setValue] = useState([50]);
// Range (two values)
const [range, setRange] = useState([25, 75]);Keyboard navigation
The slider supports full keyboard interaction:
| Key | Action |
|---|---|
Arrow Left/Down | Decrease value by one step |
Arrow Right/Up | Increase value by one step |
Page Down | Decrease value by 10 steps |
Page Up | Increase value by 10 steps |
Home | Set to minimum value |
End | Set to maximum value |
Accessibility features
Built-in accessibility support includes:
- ARIA labels - Proper labeling for screen readers
- Keyboard navigation - Full control without mouse
- Focus management - Clear focus indicators
- Value announcements - Screen readers announce value changes
- Touch support - Works on touch devices
- Proper semantics - Uses native slider ARIA patterns
Styling customization
The slider uses CSS custom properties for easy theming:
.slider-track {
background: hsl(var(--muted));
}
.slider-range {
background: hsl(var(--primary));
}
.slider-thumb {
background: hsl(var(--background));
border: 2px solid hsl(var(--primary));
}Design patterns for sliders
Keep these in mind when adding sliders to your interface:
- Show current value - Display the selected value clearly
- Indicate range - Make min/max boundaries obvious
- Use appropriate steps - Match precision to user needs
- Label meaningfully - Describe what the value controls
- Group related sliders - Settings panels work better together
- Consider mobile - Make sure thumbs are large enough to tap
- Provide alternatives - Some users prefer typing exact numbers
- Test edge cases - Make sure min/max values work as expected
Skeleton
Use to show a placeholder while content is loading. Perfect for improving perceived performance in React applications with Next.js, TypeScript, and Tailwind CSS.
Sonner
An opinionated toast component for React. Perfect for notifications, confirmations, and user feedback in Next.js, TypeScript, and Tailwind CSS applications.