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.