🤩 If you like this project, please support us by starring our GitHub repository 🤩

Soft Limits

It’s possible to enable soft limits to the range slider. This means that the edges of the slider are disabled, for example, if the value of the slider is less than 20 or greater than 80, then the slider value is reset:

<tc-range-slider
  id="slider"
   
  value1="30"
  value2="60"
  
  round="0"></tc-range-slider> 

<script src="toolcool-range-slider.min.js"></script>

<script>
  const $slider = document.getElementById('slider');

  $slider.addEventListener('onMouseUp', () => {

    if($slider.value1 !== undefined && $slider.value1 < 20) {
      $slider.value1 = 20;
    }

    if($slider.value2 !== undefined && $slider.value2 > 80) {
      $slider.value2 = 80;
    }
  });
</script>

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