JavaScript/jQuery Slider - Keyboard Support

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

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.

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

JavaScript
  • function registerKeyHandlers () {
  • const slider = $("#sliderContainer").dxSlider("instance");
  • slider.registerKeyHandler("backspace", function(e) {
  • // The argument "e" contains information on the event
  • });
  • slider.registerKeyHandler("space", function(e) {
  • // ...
  • });
  • }
See Also