Accesible Range Slider Custom Element

Category: Form , Javascript | February 14, 2023
Author:andreruffert
Views Total:406 views
Official Page:Go to website
Last Update:February 14, 2023
License:MIT

Preview:

Accesible Range Slider Custom Element

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

You Might Be Interested In:


Leave a Reply