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

Right to Left Slider

The range slider also supports right to left (RTL) using rtl attribute as follows:

<tc-range-slider
  rtl="true"
  
  value1="30"
  value2="70"
  
  generate-labels="true">
</tc-range-slider>

This option can also be changed programmatically:

<script>
    // get the reference
    const $slider = document.getElementById('slider-1');

    // set properties
    $slider.rtl = true; // or false

    // or 
    // $slider.setAttribute('rtl', 'true');
</script>

Or with TypeScript:

<script>
    // get the reference
    const $slider = document.getElementById('slider-1') as RangeSlider;
    
    // set properties
    $slider.rtl = true; // or false
    
    // or 
    // $slider.setAttribute('rtl', 'true');
</script>

📌 An example page can be found here.