Range slider

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

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.