##
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.

Previous
Node.js & JS Bundlers
Next
Auto Binding Labels