Author: | andreruffert |
---|---|
Views Total: | 262 views |
Official Page: | Go to website |
Last Update: | February 14, 2023 |
License: | MIT |
Preview:

Description:
A touch-friendly, fully accessible, slim-style range slider Custom Element written in JavaScript.
How to use it:
1. Install and import the range-slider-element
# NPM $ npm i range-slider-element
import 'range-slider-element';
2. Add the range-slider
to the page. Available props:
- min: Min value
- max: Max value
- value: Current value
- step: Step size
- dir: “ltr” or “rtl”
<range-slider min="0" max="100" value="50" step="1" dir="rtl" > </range-slider>
3. Event handlers.
const elements = document.querySelectorAll(['range-slider', 'input']); elements.forEach(element => { element.insertAdjacentHTML('afterend', ` <output>${element.value}</output> `); }); document.addEventListener('input', e => { const input = e.target; const output = input.nextElementSibling; const valueDisplay = input.querySelector('.value-display'); if (output) { output.textContent = input.value; } if (valueDisplay) { valueDisplay.textContent = input.value; input.style.setProperty('--value-width', '' + input.value.length); } });