Keyboard Navigation

The keyboard navigation of the Slider is always available.

The Slider supports the following keyboard shortcuts:

SHORTCUTDESCRIPTION
Upper Arrow & Right Arrow keysIncreases the Slider value with the predefined step.
Down Arrow & Left Arrow keysDecreases the Slider value with the predefined step.
HomeSets the Slider to its minimum value.
EndSets the Slider to its maximum value.
Tab(Accessibility mode) Focuses the Slider element.
import * as React from 'react';
import * as ReactDOM from 'react-dom';

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

class App extends React.Component {
    render() {
        return (
            <Slider
                buttons={true}
                step={1}
                defaultValue={7}
                min={1}
                max={10}
            >
                <SliderLabel position={1}>1</SliderLabel>
                <SliderLabel position={3}>3</SliderLabel>
                <SliderLabel position={5}>5</SliderLabel>
                <SliderLabel position={7}>7</SliderLabel>
                <SliderLabel position={10}>10</SliderLabel>
            </Slider>
        );
    }
}

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