Slider
Form
Range input with single/dual thumb support, custom marks, value labels, orientation options, and step configuration
Basic Examples
Default
Adjust the volume level
With Value Display
50
With Tooltip
50%
With Error
Storage almost full
Disabled
Required
Please provide a rating
Sizes
Small
Medium (Default)
Large
Variants
Default
Primary
Secondary
Accent
Success
Warning
Error
Ghost
Glass
Range Slider
Price Range
20 - 80
Time Range
9 - 17
9:00
17:00
Temperature Range
18 - 24
Age Range
25 - 45
Step & Marks
With Step (10)
50
With Marks (Auto)
Custom Marks
Off
Low
Med
High
Max
Custom Marks with Range
XS
S
M
L
XL
Vertical Orientation
Volume
50
Temperature
22°C
With Marks
Range
Composable API
Basic Composable
Built with composable components
Custom Styled
Advanced Features
Keyboard Navigation
50
50
Arrow keys: ±1, Page Up/Down: ±10, Home/End: Min/Max
Custom Step
0
L
C
R
0
Decimal Values
3.5
⭐ 3.5
Large Range
2024
2024
Usage Guidelines
When to Use
- Numeric ranges
- Price filters
- Volume controls
Accessibility
- aria-valuemin/max/now
- Keyboard arrow key control
- Value announced on change
Performance
- RAF-based updates
- Throttled value changes
Common Mistakes
- Steps too granular
- No min/max labels
Frequently Asked Questions
Yes, Slider supports single and dual thumb for range selection with min/max values.
Yes, Slider supports custom marks and value labels along the track.
Related Components
View allAutocomplete
Asynchronous search input with debounced queries, virtual scrolling for large datasets, and keyboard-driven selection
Checkbox
Accessible checkbox input with indeterminate state support and form integration
CheckboxGroup
Accessible CheckboxGroup for multi-selection, and form integration
ColorPicker
Color selection component with preset colors, HEX/RGB/HSL input, and visual picker interface