##
Vertical Slider

Vertical slider can be achieved using the type attribute as following:

    <tc-range-slider
      type="vertical"
      value1="30"
      value2="70"></tc-range-slider>

It accepts all the same attributes as the horizontal slider. The default height of a vertical slider is 300px unless the height attribute is provided.

It is also possible to reverse the direction and slide from bottom to top using the btt attribute:

    <toolcool-range-slider
      type="vertical"
      btt="true"
      value1="30"
      value2="70"
      generate-labels="true">
    </toolcool-range-slider>

Slider type can also be changed via the API:

    const $slider = document.querySelector('#slider');
    $slider.type = 'vertical'; // or horizontal

The bottom to top attribute can also be change programmatically:

    const $slider = document.querySelector('#slider');
    $slider.btt = true; // or false

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

> 📌 Bottom to top example page can be found here.

Previous
Range: Values List
Next
Right To Left Support