Google chrome vertical <input type="range" />
Solution 1
It seems Chromium does not yet implement support for this yet:
See: http://www.chromium.org/developers/web-platform-status/forms
Not available yet
- Localization of
- Dedicated UIs for color, date, datetime, datetime-local, month, time, and week types
- Automatic switching to vertical range
- Value sanitization algorithms
- datalist element, list attribute, and list/selectedOption properties
Edit: Vuurwerk indicated that it is actually possible to alter the presentation using the -webkit-appearance: slider-vertical
property. Although this does transform it into a vertical slider, I would not recommend doing this, since it will break your layout and doesn't look really pretty: example.
If you really want a vertical slider, use a JavaScript solution. Support for <input type="range" />
is very basic at the moment anyway, so you are probably better off with a graceful degradation or progressive enhancement approach.
Solution 2
-webkit-appearance: slider-vertical;
Solution 3
Maybe with a css transform ?
-webkit-transform: rotate(90);
Another solution could be to use the slider module from jQuery UI.
http://jqueryui.com/demos/slider/#slider-vertical
Solution 4
input[type='range']{
width:20px;
height:140px;
border:2px solid blue;
display:block;
-webkit-transform:rotate(90deg); /* Safari and Chrome */
-moz-transform:rotate(90deg);
-o-transform:rotate(90deg);
-ms-transform:rotate(90deg);
transform:rotate(90deg);
z-index: 0;
}
Timo Willemsen
My name is Timo Willemsen a Medical Imaging student from the Netherlands with an affiliation with programming.
Updated on July 19, 2022Comments
-
Timo Willemsen almost 2 years
On opera, i can do the following
<style> #range{ width: 20px; heigth: 300px; } </style> <input type="range" id="range" />
and it will render a vertical slider. However, this doesn't seem to work on chrome. Is there a way I can do this? (I'm not looking for any jQuery sliders or anything)