Tool Cool Range Slider Documentation

Tool Cool Range Slider Documentation

🤩 If you like this project, please support us by starring our GitHub repository 🤩

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.

Previous

Next