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.