How to display vertical range slider

Question

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

I found several comments and links that seem to indicate that setting the height to greater than the width will cause the browser to automatically change orientation, but in my testing it works only in Opera, it’s used to working in Opera, but it doesn’t work anymore. How can I orient the HTML5 range slider vertically?

Answer 1

First set the height greater than the width. Theoretically, this is all you need. HTML5 Spec offers as much as possible :

... UA determined the orientation of the control with respect to the height and width parameters specified in the sheet style.

Opera implemented this method, but Opera now uses WebKit Blink . To date, no browser uses a vertical slider based solely on height, wider.

Regardless, setting a height exceeding the width is necessary for proper layout between browsers. Using left and right padding will also help in layout and positioning.

For Chrome, use -webkit-appearance: slider-vertical .

For IE, use writing-mode: bt-lr .

For Firefox, add the orient="vertical" attribute in the html. Too bad they did it like that. Visual styles should be controlled using CSS, not HTML.

 input[type=range][orient=vertical] { writing-mode: bt-lr; /* IE */ -webkit-appearance: slider-vertical; /* WebKit */ width: 8px; height: 175px; padding: 0 5px; } 

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

---

Denial of responsibility:

This solution is based on current browser implementations of yet undefined or incomplete CSS properties. If you intend to use it in your code, be prepared to make code adjustments as new versions of the browser are released and w3c recommendations are complete.

MDN contains an explicit warning against using -webkit-appearance on the Internet:

Do not use this property on websites: it is not only not standard, but also changes its behavior from one browser to another. Even the none keyword does not have the same behavior for each form element in different browsers, and some do not support it at all.

The title for a demonstration of the vertical slider in the IE documentation erroneously indicates that an installation height exceeding the width will display a vertical range slider, but this does not work. In the code section , it does not explicitly set the height or width and uses writing-mode instead. The writing-mode , property implemented by IE is very reliable. Unfortunately, the values ​​defined in the current working draft specification

Answer 2

You can do this with css transforms, though be careful with the height / width of the container. You may also need to install it below:

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

 <input type="range"/> 

---

or the equivalent of 3d conversion:

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

You can also use this to switch the direction of the slide by setting it to 180 degrees or 90 degrees horizontally or vertically respectively.

Answer 3

Without changing position to absolute, see below. It also supports all latest browsers.

 .vranger { margin-top: 50px; transform: rotate(270deg); -moz-transform: rotate(270deg); /*do same for other browsers if required*/ } 

 <input type="range" class="vranger"/> 

for very old browsers you can use -sand-transform: rotate(10deg); of sandpaper CSS

or use

prefix selector, for example -ms-transform: rotate(270deg); for IE9