DevExtreme jQuery/JS - Keyboard Support

An end user can use the following keys to interact with the widget.

Key Action
← / → Decreases/increases the value of the focused handle by a step.
Page Up / Page Down Decreases/increases the value of the focused handle by a keyStep.
Home / End Sets the focused handle to the minimum/maximum value or to the value of the other handle.
Tab / Shift + Tab Switches between the handles.

You can implement a custom handler for a key using the registerKeyHandler(key, handler) method.

JavaScript
  • function registerKeyHandlers () {
  • let rangeSlider = $("#rangeSliderContainer").dxRangeSlider("instance");
  • rangeSlider.registerKeyHandler("backspace", function (e) {
  • // The argument "e" contains information on the event
  • });
  • rangeSlider.registerKeyHandler("space", function (e) {
  • // ...
  • });
  • }
See Also