How to display a range input slider vertically
By default input type='range' displays a slider horizontally. But in this article, you will learn how to display a range input slider vertically.
Method 1 :- Display input slider vertically.
Display input type range vertically
<style> input[type=range]{ writing-mode: bt-lr; -webkit-appearance: slider-vertical; width: 10px; height: 200px; padding: 0 5px; } </style> <input type="range" orient="vertical" />Try it Yourself »
- For Firefox, add the orient="vertical" attribute to the input type range element. Inside the style element, add -webkit-appearance: slider-vertical; for chrome and writing-mode: bt-lr; for IE.
- Using the height and width property, set the height and width for the input slider.
Display vertically input slider using css.
You can also display the input slider vertically using css transform:rotate() property.
Using css transform:rotate() property
<style> input[type=range]{ transform: rotate(270deg); margin-top:30%; } </style> <input type="range"/>Try it Yourself »
Conclusion
In this article, you have learned how to display a range input slider vertically using css.
save
listen
AI Answer
How to display a range input slider vertically
2
By default input type='range' displays a slider horizontally. But in this article…
asked
Apu
2 answers
2915
By default input type='range' displays a slider horizontally. But in this article…
Answer Link
answered
Apu
https://www.3schools.in/p/embed.html?q=CiAgPHN0eWxlPgogICAgLnZlcnRpY2FsLXNsaWRlciB7CiAgICAgIHRyYW5zZm9ybTogcm90YXRlKDkwZGVnKTsKICAgIH0KICA8L3N0eWxlPgogPGlucHV0IHR5cGU9InJhbmdlIiBjbGFzcz0idmVydGljYWwtc2xpZGVyIj4KIA==
https://www.3schools.in/p/embed.html?q=CiAgPGlucHV0IHR5cGU9InJhbmdlIiBpZD0ic2xpZGVyIj4KICA8c3BhbiBpZD0ic2xpZGVyLXZhbHVlIj4wPC9zcGFuPgogIDxzY3JpcHQ+CiAgICBjb25zdCBzbGlkZXIgPSBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgic2xpZGVyIik7CiAgICBjb25zdCBzbGlkZXJWYWx1ZSA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCJzbGlkZXItdmFsdWUiKTsKICAgIGNvbnN0IHVwZGF0ZVZhbHVlID0gKCkgPT4gewogICAgICBzbGlkZXJWYWx1ZS50ZXh0Q29udGVudCA9IHNsaWRlci52YWx1ZTsKICAgIH07CiAgICB1cGRhdGVWYWx1ZSgpOwogICAgc2xpZGVyLmFkZEV2ZW50TGlzdGVuZXIoImlucHV0IiwgdXBkYXRlVmFsdWUpOwogIDwvc2NyaXB0Pg==
We have an input element with type="range" and an id of "slider."
We also have a <span> element with an id of "slider-value" to display the current value.
We use JavaScript to define an updateValue function that updates the text c…