How to display a range input slider vertically

Question

I would like to display an slider control vertically. I\'m only concerned with browsers that support the range slider control.

Answer 1

You can do this with css transforms, though be careful with container height/width. Also you may need to position it lower:

input[type="range"] {
   position: absolute;
   top: 40%;
   transform: rotate(270deg);
}

---

or the 3d transform equivalent:

input[type="range"] {
   transform: rotateZ(270deg);
}

You can also use this to switch the direction of the slide by setting it to 180deg or 90deg for horizontal or vertical respectively.