Slider
A headless slider primitive with keyboard navigation, pointer drag support, and ARIA slider semantics.
Basic
A horizontal slider with two-way binding. Use
@bind-Value to track the current value.Value: 50
Vertical
A vertical slider. The parent container must have a defined height. Set
Orientation to SliderOrientation.Vertical.Value: 30
Custom Step and Range
Slider with custom
Step, Min, and Max values. This slider increments in steps of 10, from 0 to 1000.0
500
1000
Disabled
Slider in disabled state. Set
Disabled to true to prevent user interaction.Data Attributes
Use these data attributes for CSS styling:
[data-orientation="horizontal"]- When the slider is horizontal[data-orientation="vertical"]- When the slider is vertical[data-disabled]- When the slider is disabled
Keyboard Navigation
- → / ↑ - Increase value by one step
- ← / ↓ - Decrease value by one step
- Page Up - Increase value by 10% of range
- Page Down - Decrease value by 10% of range
- Home - Set value to minimum
- End - Set value to maximum