Accesible Range Slider Custom Element

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);
  }
});