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.