All Components

Keyboard Navigation

The keyboard navigation of the RangeSlider is always available.

The RangeSlider supports the following keyboard shortcuts:

SHORTCUT DESCRIPTION
Tab+Arrow Keys Focuses the drag handle of the next slider.
Shift+Tab arrow Focuses the drag handle of the previous slider.
Right Arrow or Up Arrow Increases the value of the RangeSlider.
Left Arrow or Down Arrow Decreases the value of the RangeSlider.
<div id="vueapp" class="vue-app">
    <kendo-rangeslider :selection-start="start"
                         :selection-end="end"
                                             :min="0"
                                             :max="100">
        </kendo-rangeslider>
</div>
Vue.use(InputsInstaller);

new Vue({
        el: "#vueapp",
        data: {
            start: 25,
            end: 75
        }
})
In this article