Sometimes, we want to display a range input slider vertically with CSS.
In this article, we’ll look at how to display a range input slider vertically with CSS.
How to display a range input slider vertically with CSS?
To display a range input slider vertically with CSS, we set the -webkit-appearance property.
For instance, we write
<input type="range" />
to add the range input.
Then we write
input[type="range"] {
-webkit-appearance: slider-vertical;
width: 50px;
height: 200px;
padding: 0 24px;
outline: none;
background: transparent;
}
to make it vertical with -webkit-appearance: slider-vertical;.
Conclusion
To display a range input slider vertically with CSS, we set the -webkit-appearance property.
