Range Dragging

It’s possible to enable range dragging for a multi-pointer slider using the range-dragging property.

Two-pointer slider example:

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

Three-pointer slider example:

<tc-range-slider
  range-dragging="true"
  
  value1="30"
  value2="50"
  value3="70"
  
  generate-labels="true"
  round="0"></tc-range-slider>

It is possible to programmatically toggle range dragging via the API:

const $slider = document.querySelector('#slider');
$slider.rangeDragging = true; // or false

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