##
Disable range slider completely or several pointers

It’s possible to disable the range slider using disabled attribute:

    <tc-range-slider
      disabled="true"

      generate-labels="true"
      value1="30"
      value2="70">
    </tc-range-slider>

This property can be toggled via APIs as follows:

    const $slider1 = document.getElementById('slider-1');
    const $toggleButton = document.getElementById('toggle-btn');

    $toggleButton.addEventListener('click', () => {
      $slider1.disabled = !$slider1.disabled;
    });

The default opacity of the range slider when disabled is 0.4. This value can be change using css variable –tc-range-slider-opacity:

    <tc-range-slider
      disabled="true"
      style="--opacity: 0.15"

      value1="30"
      value2="70"
      generate-labels="true"></tc-range-slider>

It is also possible to disable only the first pointer:

    <tc-range-slider
      pointer1-disabled="true"
      value1="30"
      value2="70"
      generate-labels="true">
    </tc-range-slider>

Or disable just the second pointer:

    <tc-range-slider
      pointer2-disabled="true"
      value1="30"
      value2="70"
      generate-labels="true">
    </tc-range-slider>

Or disable the second and the third pointer:

    <tc-range-slider
      pointer2-disabled="true"
      pointer3-disabled="true"

      value1="30"
      value2="50"
      value3="70"

      generate-labels="true">
    </tc-range-slider>

This option can also be changed programmatically:

    const $slider1 = document.getElementById('slider-1');

    $slider1.pointer1Disabled = true;
    $slider1.pointer2Disabled = true;

> 📌 An example page can be found here.

Previous
Accessibility
Next
Storage Plugin