##
Animation on Panel Click

By default, the library has an animation when the slider panel is clicked. This is a CSS transition animation which value is 0.3s.

This value can be changed using the animate-onclick property:

    <tc-range-slider
      animate-onclick="2s"

      value="50"
      generate-labels="true"
      round="0"></tc-range-slider>

It’s possible to disable the animation by passing false:

    <tc-range-slider
      animate-onclick="false"

      value="50"
      generate-labels="true"
      round="0"></tc-range-slider>

The value of the animate-onclick property is specified in seconds, ms, etc. and is the same as the css transition-duration property.

There is also a corresponding API:

    const $slider = document.querySelector('#slider');
    $slider.animateOnClick = '0.3s';

    // or

    $slider.animateOnClick = false; // disable

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

Previous
Images & SVGs as pointers
Next
Add CSS API