Maximum & Minimum Pointers Distance

In the multi-pointers range slider, it’s possible to define the minimum required distance between the pointers using pointers-min-distance attribute:

<tc-range-slider
  pointers-min-distance="10"

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

It is also possible to define the maximum distance between the pointers using the pointers-max-distance attribute:

<tc-range-slider
  pointers-max-distance="50"

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

There is also a corresponding API properties:

const $slider = document.querySelector('#slider');
$slider.pointersMinDistance = 5;
$slider.pointersMaxDistance = 50;

Please note that the provided distances should be >= 0;

pointers-min-distance and pointers-max-distance properties have no effect if pointers overlap is enabled.

The properties have the following default values:

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