Keyboard Navigation

The keyboard navigation of the RangeSlider is always available when the component is not disabled or readonly.

Each of the RangeSlider handles (thumbs) supports the following keyboard shortcuts when focused:

SHORTCUTDESCRIPTION
Upper Arrow & Right Arrow keysIncreases the value, corresponding to the focused handle, with a small step.
Down Arrow & Left Arrow keysDecreases the value, corresponding to the focused handle, with a small step.
Page UpIncreases the value, corresponding to the focused handle, with a large step.
Page DownDecreases the value, corresponding to the focused handle, with a large step.
HomeSets the value, corresponding to the focused handle to the minimum value.
EndSets the value, corresponding to the focused handle to the maximum value.
Tab(Accessibility mode) Focuses the handle element that is next in the natural tabbing sequence.
Example
View Source
Edit In Stackblitz  
Change Theme:

In this article

Not finding the help you need?