Touch & Keyboard Support

The library supports touch screens and also handles the following keys:

Horizontal slider:

Key Function
left arrow goes one step to the left
right arrow goes one step to the right
up arrow jumps to the min value
down arrow jumps to the max value
mousewheel up goes one step to the left
mousewheel down goes one step to the right

Horizontal slider in right-to-left mode:

Key Function
left arrow goes one step to the left
right arrow goes one step to the right
up arrow jumps to the max value
down arrow jumps to the min value
mousewheel up goes one step to the left
mousewheel down goes one step to the right

Vertical slider:

Key Function
left arrow jumps to the min value
right arrow jumps to the max value
up arrow goes one step up
down arrow goes one step down
mousewheel up goes one step up
mousewheel down goes one step down

Vertical slider in bottom-to-top mode:

Key Function
left arrow jumps to the max value
right arrow jumps to the min value
up arrow goes one step up
down arrow goes one step down
mousewheel up goes one step up
mousewheel down goes one step down

keyboard-disabled attribute

It’s possible to disable keyboard support with keyboard-disabled attribute:

<tc-range-slider keyboard-disabled="true"></tc-range-slider>

Or via API:

const $slider1 = document.getElementById('slider-1');
$slider1.keyboardDisabled = true;

📌 An example page with the source code can be found here.

mousewheel-disabled attribute

It’s possible to disable mousewheel events with mousewheel-disabled attribute:

<tc-range-slider mousewheel-disabled="true"></tc-range-slider>

Or via API:

const $slider1 = document.getElementById('slider-1');
$slider1.mousewheelDisabled = true;

📌 An example page with the source code can be found here.