How to display a range input slider vertically

Issue

I would like to display an <input type="range" /> slider control vertically. I'm only concerned with browsers that support the range slider control.

I've found some comments and references that seem to indicate that setting the height greater than the width will cause the browser to change the orientation automatically, but in my testing, that only works in Opera used to work in Opera, but not anymore. How can I orient an HTML5 range slider vertically?

Solution

First, set height greater than width. This helps to get the layout right between browsers. Applying left and right padding will also help with layout and positioning.

For Chrome (and other chromium based browsers), use appearance: slider-vertical.

For Firefox, add an orient="vertical" attribute to the html. Pity that they did it this way. Visual styles should be controlled via CSS, not HTML.

input[type=range][orient=vertical] {
    appearance: slider-vertical;
    width: 8px;
    height: 175px;
    padding: 0 5px;
}

<input type="range" orient="vertical" />

---

My answer used to have a disclaimer here using about non-standardized behavior and the volatility of the web, but this answer is over 10 years old and the same CSS from 10 years ago still works today. In fact MDN includes this same advice in its documentation for <input type="range">. Feel free to check the edit history of this answer to read up about that, but it is plain to me that this isn't going to change any time soon.

Edit: Famous last words! According to a comment in github, it looks like chromium will soon support changing the orientation via writing-mode in combination with direction to control whether sliding up increases or decreases the value. And it seems they're trying to get the standard updated to match. We'll see what happens!

Answered By - gilly3