Table Maker3schools TranslateImage CompressorFavicon Icon GeneratorCrop & Resize Image
Apu
Apu June 03, 2023 . #css . #HowTo

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 »
  1. 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.
  2. 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
2 Answers
  1. To display a range input slider vertically, you can use CSS to rotate the slider and style it accordingly.
    https://www.3schools.in/p/embed.html?q=CiAgPHN0eWxlPgogICAgLnZlcnRpY2FsLXNsaWRlciB7CiAgICAgIHRyYW5zZm9ybTogcm90YXRlKDkwZGVnKTsKICAgIH0KICA8L3N0eWxlPgogPGlucHV0IHR5cGU9InJhbmdlIiBjbGFzcz0idmVydGljYWwtc2xpZGVyIj4KIA==
    Reply Delete
    Share
  2. To show the value of an input element with type="range" as it changes, you can use JavaScript to update a separate element, such as a <span>, with the current value. Here's an example:
    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…
    Reply Delete
    Share
Write Your Answer
loading
back
View All