Keyboard Interaction

You can use Keyboard shortcut keys as an alternative to the mouse for using the Slider widget. All options in the Slider can be accessed using keyboard shortcuts. The following table explains the keyboard shortcut keys and the operations that can be performed using the corresponding keys.

List of Keyboard shortcuts

Shortcut Key Description
Alt + j Focuses into the Slider handle
Up/Right Increments the Slider value
Down/Left Decrements the Slider value
Home Slider handle moves to the start value
End Slider handle moves to the end value
Esc Focuses out from the Slider handle

Configure keyboard interaction

The following steps explains you on how to enable keyboard support in Slider.

In an HTML page, specify the <div> elements to render the Range Slider.

  • html
  • <div class="txt">Range Slider</div>
       <div id="rangeSlider"></div>
  • javascript
  • // Focus the Slider control in the document key down function.
    
    /// <reference path="tsfiles/jquery.d.ts" />
    /// <reference path="tsfiles/ej.web.all.d.ts" />
    
    module SliderComponent {
        $(function () {
            var slider = new ej.Slider($("#rangeSlider"), {
                sliderType: ej.SliderType.Range,
                values: [25,75],
                width: "500",
                enableRTL:true
            });
    
            $(document).on("keydown", function (e) {
                if (e.altKey && e.keyCode === 74) { // j- key code.
                   $("#rangeSlider a")[0].focus();
                }
            });
        });
     }

    Run the sample and press, Alt + j keys to set focus in the Slider handle and you can handle the Slider operations using the keyboard shortcut keys.