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.