Range slider

RangeSlider enables the selection of an interval within a range of values. It offers inline label positioning and marks displayed under the track.

Note: This tab list includes overflow; tab positions may be inaccurate or change when a tab is selected
KeyFunction
Tab
  • If focus is outside the RangeSlider, moves focus to the RangeSlider indicator within the tabbing order.
  • If focus is on the first thumb of the RangeSlider, moves focus to the second thumb. If focus is on the second thumb, moves focus to the next component within the tabbing order.
Shift + Tab
  • Moves focus to the previous item within the tabbing order
Up arrow / Right arrow
  • Increase the value of the RangeSlider by one step.
Down arrow / Left arrow
  • Decrease the value of the RangeSlider by one step.
Home
  • Set the RangeSlider to the first allowed value in its range.
End
  • Set the RangeSlider to the last allowed value in its range.
Page Up
  • Increase the RangeSlider value by an amount larger than the step change made by Up Arrow. This amount can be controlled via the stepMultiplier prop.
Page Down
  • Decrease the RangeSlider value by an amount larger than the step change made by Down Arrow. This amount can be controlled via the stepMultiplier prop.