Get/Set Values & Change Event

You can control the range slider by referencing the tc-range-slider HTML tag.

<tc-range-slider id="slider-1"></tc-range-slider>

<script src="toolcool-range-slider.min.js"></script>

<script>
    // get the reference
    const $slider = document.getElementById('slider-1');

    // listen to the change event
    $slider.addEventListener('change', (evt) => {
      console.log(evt.detail.value);
    });

    // change value
    $slider.value = 50;

    // or 
    // $slider.setAttribute('value', '50');

    // get value
    console.log($slider.value);
</script>

Two pointers range slider example:

<tc-range-slider id="slider-2" value1="30" value2="70"></tc-range-slider>

<script src="toolcool-range-slider.min.js"></script>

<script>
    // get the reference
    const $slider = document.getElementById('slider-2');

    // listen to the change event
    $slider.addEventListener('change', (evt) => {
      console.log(evt.detail.value1, evt.detail.value2);

      // this array should not be changed directly
      console.log(evt.detail.values); 
    });

    // change values
    $slider.value1 = 40;
    $slider.value2 = 80;

    // or 
    // $slider.setAttribute('value1', '40');
    // $slider.setAttribute('value2', '80');

    // get values
    console.log($slider.value1, $slider.value2);
</script>

TypeScript example:

const $slider1 = document.getElementById('slider-1') as RangeSlider;
const $label1 = document.getElementById('label-1') as HTMLElement;

$slider1.addEventListener('change', (evt: CustomEvent) => {
  $label1.textContent = evt.detail.value;
});

$slider1.value = 50;

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