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

Property | Default Value | API Property
--- | --- | ---
pointers-max-distance | 0 | pointersMinDistance
pointers-max-distance | Infinity | pointersMaxDistance

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

Previous
Pointers Overlap
Next
Soft Limits