Google chrome vertical <input type = "range" / ">

Question

In opera, I can do the following

<style> #range{ width: 20px; heigth: 300px; } </style> <input type="range" id="range" /> 

and it will display a vertical slider. However, this does not work on chrome. Is there a way I can do this? (I'm not looking for any jQuery sliders or anything else)

Answer 1

Chromium doesn't seem to support support yet:

See: http://www.chromium.org/developers/web-platform-status/forms

Not yet available

• Localization
• Dedicated user interfaces for color, date, date and time, local-time, month, time, and week types
• Automatically switches to vertical range
• Sanitation Algorithms Values
• datalist element, list attribute and list / selectedOption properties

Edit: Vuurwerk states that you can actually change the presentation using the -webkit-appearance: slider-vertical property. Although this turns it into a vertical slider, I would not recommend it, as it will break your layout and does not look really beautiful: example .

If you really need a vertical slider, use a JavaScript solution . Support for <input type="range" /> is very important anyway, so you will probably be better off with a graceful decline or progressive improvement.

Answer 2

-webkit-appearance: slider-vertical;

Answer 3

Perhaps with css conversion?

 -webkit-transform: rotate(90); 

Another solution might be to use the slider module from the jQuery user interface.
http://jqueryui.com/demos/slider/#slider-vertical

Answer 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; } 

Answer 5

As Aron said, web browser support is not supported.

However, this is what I could do to achieve the result.

 body { margin: 50px; } .opacitySlider { position: relative; transform: rotate(90deg); width: 125px; height: 20px; } .opacitySlider:before { content: " "; left: 10px; top: 1px; position: absolute; border-top: 9px solid transparent; border-bottom: 9px solid transparent; border-left: 115px solid #ccc; } .opacitySlider input[type=range] { outline: none; -webkit-appearance: none; height: 20px; padding: 0; width: 125px; background: transparent; position: relative; margin: 0; cursor: pointer; } .opacitySlider input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; background: #69a80e; height: 20px; width: 20px; border: 1px solid #fff; border-radius: 50%; } .opacitySlider input[type=range]::-moz-range-track { border: none; background-color: transparent; } .opacitySlider input[type=range]::-moz-range-thumb { background: #69a80e; height: 20px; width: 20px; border: 1px solid #fff; border-radius: 50%; } .opacitySlider input[type=range]::-ms-fill-lower, .opacitySlider input[type=range]::-ms-fill-upper { background: transparent; } .opacitySlider input[type=range]::-ms-track { height: 18px; border: none; background-color: transparent; margin: 0; } .opacitySlider input[type=range]::-ms-thumb { background: #69a80e; height: 20px; width: 20px; border: 1px solid #fff; border-radius: 50%; height: 17px; width: 17px; } 

 <div class="opacitySlider"> <input step="any" type="range"> </div>