Slider

View in Storybook

Explore interactive examples and all component variations in our Storybook.

The Slider component allows users to select a value or range of values by sliding a handle along a track. Built on Radix UI, it provides accessibility features, keyboard navigation, and smooth interactions. Perfect for settings, filters, volume controls, and any interface requiring numeric value selection.

Basic Usage

View in Storybook

Controlled Slider

Volume: 25%

Range Slider

Price Range: $25 - $75

Different Steps

Step 1: 50

Step 5: 50

Step 10: 50

Settings Panel

Display & Audio Settings

Volume: 75%

Brightness: 60%

Contrast: 50%

Saturation: 80%

Price Filter

Price Filter

Price Range: $200 - $800

Current filter: $200 - $800

Disabled State

Disabled Single Value: 30

Disabled Range: 20 - 80

Vertical Orientation

30%Bass

60%Mid

80%Treble

Properties

Slider

Property	Type	Default	Description
value	number[]	-	The controlled value of the slider.
defaultValue	number[]	-	The default value for uncontrolled usage.
onValueChange	(value: number[]) => void	-	Callback when the value changes.
min	number	0	The minimum value of the slider.
max	number	100	The maximum value of the slider.
step	number	1	The step increment between values.
orientation	"horizontal" | "vertical"	"horizontal"	The orientation of the slider.
disabled	boolean	false	Whether the slider is disabled.
className	string	-	Additional CSS classes for custom styling.
dir	"ltr" | "rtl"	-	The reading direction.
inverted	boolean	false	Whether the slider is inverted.
name	string	-	The name attribute for form submission.

Value Handling

Single Value

For single value sliders, pass an array with one element:

const [value, setValue] = useState([50]);
<Slider value={value} onValueChange={setValue} />

Range Values

For range sliders, pass an array with two elements:

const [range, setRange] = useState([25, 75]);
<Slider value={range} onValueChange={setRange} />

Accessibility

The Slider component includes comprehensive accessibility features:

• Keyboard Navigation - Arrow keys to adjust values, Home/End for min/max
• Screen Reader Support - Proper ARIA attributes and value announcements
• Focus Management - Clear focus indicators for each thumb
• Touch Support - Optimized for touch devices and mobile interactions
• Value Constraints - Automatic clamping to min/max values
• Step Validation - Values automatically snap to valid step increments

Common Use Cases

The Slider component is perfect for:

• Settings & Preferences - Volume, brightness, contrast, and other adjustable settings
• Filters & Search - Price ranges, date ranges, and numeric filters
• Media Controls - Audio/video scrubbing, volume control, playback speed
• Data Visualization - Interactive charts, timeline controls, zoom levels
• Form Inputs - Numeric input with visual feedback and constraints
• Gaming & Apps - Difficulty levels, sensitivity settings, configuration options

Best Practices

1. Clear Labels - Always provide descriptive labels showing current values
2. Appropriate Steps - Choose step sizes that make sense for your use case
3. Visual Feedback - Show current values and provide immediate visual feedback
4. Reasonable Ranges - Set min/max values that are meaningful to users
5. Accessibility - Ensure keyboard navigation works properly
6. Mobile Optimization - Test touch interactions on various devices
7. Performance - Debounce rapid value changes for expensive operations
8. Consistent Behavior - Maintain consistent slider behavior across your application