Keyboard Navigation

The keyboard navigation of the RangeSlider is always available.

The RangeSlider supports the following keyboard shortcuts:

SHORTCUTDESCRIPTION
Upper Arrow & Right Arrow keysIncreases the RangeSlider value with the predefined step.
Down Arrow & Left Arrow keysDecreases the RangeSlider value with the predefined step.
HomeSets the RangeSlider to its minimum value.
EndSets the RangeSlider to its maximum value.
TabFocus the next DragHandle inside the RangeSlider.
import * as React from 'react';
import * as ReactDOM from 'react-dom';

import { RangeSlider, SliderLabel } from '@progress/kendo-react-inputs';

class App extends React.Component {
    render() {
        return (
            <RangeSlider
                defaultValue={{start: 30, end: 70}}
                step={1}
                min={0}
                max={100}
            >
                {[0, 25, 50, 75, 100].map((perc, i) => (
                    <SliderLabel
                        key={i}
                        position={perc}
                    >
                        {perc.toString()}
                    </SliderLabel>
                ))}
            </RangeSlider>
        );
    }
}

ReactDOM.render(<App />, document.querySelector('my-app'));