RangeSlider Component

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.

0 1000
300
700
Selected: $300 - $700

Keyboard Navigation

Use keyboard to control the slider handles.

  • 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
0 100
20
80
Selected range: 20 - 80
An unhandled error has occurred. Reload 🗙