Range Slider
RangeSlider
A dual-handle slider for selecting a range of values with keyboard support, tooltips, and full accessibility.
Basic
A simple range slider with default settings (0-100).
0
100
25
75
Selected range: 25 - 75
Price Range
Custom range with step increments for price selection.
0
1000
200
600
Price range: $200 - $600
Age Range
Age selector with custom min/max values.
18
100
25
45
Age range: 25 - 45 years
With Tick Marks
Range slider with visible tick marks at specified intervals.
0
100
25
75
Selected range: 25 - 75
Without Tooltips
Range slider with tooltips disabled.
0
100
Selected range: 30 - 70
Without Labels
Range slider with min/max labels hidden.
40
80
Selected range: 40 - 80
Decimal Steps
Range slider with decimal step values for precise selection.
0
10
2.5
7.5
Selected range: 2.5 - 7.5
Vertical Orientation
Range slider in vertical orientation.
0
100
30
70
Selected range: 30 - 70
Disabled State
Range slider in disabled state cannot be interacted with.
0
100
35
65
Selected range: 35 - 65
Form Integration
Range slider integrated with Blazor's EditForm for validation.
Keyboard Navigation
Use keyboard to control the slider handles.
0
100
20
80
Selected range: 20 - 80
- Tab — Focus handles
- ← ↓ — Decrease value
- → ↑ — Increase value
- Page Up — Increase by 10 steps
- Page Down — Decrease by 10 steps
- Home — Jump to minimum
- End — Jump to maximum
API Reference
Component parameters and their types.
| Prop | Type | Default | Description |
|---|---|---|---|
| MinValue | double | 0 | The lower bound value. Use @bind-MinValue for two-way binding. |
| MaxValue | double | 100 | The upper bound value. Use @bind-MaxValue for two-way binding. |
| Min | double | 0 | The minimum allowed value. |
| Max | double | 100 | The maximum allowed value. |
| Step | double | 1 | The increment step between values. |
| ShowTooltips | bool | true | Whether to show value tooltips on hover. |
| ShowLabels | bool | false | Whether to show min/max labels. |
| ShowTicks | bool | false | Whether to show tick marks. |
| TickInterval | double | 25 | Interval between tick marks. |
| Orientation | SliderOrientation | Horizontal | Slider orientation: Horizontal or Vertical. |
| Disabled | bool | false | Whether the slider is disabled. |
| AriaLabel | string? | null | ARIA label for accessibility. |