如何垂直显示范围input滑块
我想垂直显示一个<input type="range" />滑块控件。 我只关心支持范围滑块控件的浏览器。
我发现一些评论和引用似乎表明，设置高度大于宽度会导致浏览器自动改变方向，但在我的testing，这只能在Opera中使用Opera工作，但现在不再。 如何垂直定位HTML5范围滑块？
首先，设置高度大于宽度。 从理论上讲，这是你应该需要的。 HTML5规范build议如下 ：
… UA根据样式表指定的高度和宽度属性的比率确定控件的方向。
歌剧已经这样实施，但Opera现在使用WebKit Blink 。 到目前为止，没有一个浏览器仅仅基于高度大于宽度的垂直滑块。
无论如何，需要设置高度大于宽度才能在浏览器之间进行布局。 应用左右填充也将有助于布局和定位。
对于Chrome，请使用-webkit-appearance: slider-vertical 。
对于IE，使用writing-mode: bt-lr 。
对于Firefox，向html添加一个orient="vertical"属性。 可惜他们这样做了。 视觉样式应该通过CSS控制，而不是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" />
你可以用CSS转换来做到这一点，但要小心容器的高度/宽度。 你也可能需要把它放在较低的位置：
input[type="range"] { position: absolute; top: 40%; transform: rotate(270deg); }
<input type="range"/>
没有改变的立场绝对，见下文。 这也支持所有最近的浏览器。
.vranger { margin-top: 50px; transform: rotate(270deg); -moz-transform: rotate(270deg); /*do same for other browsers if required*/ }
<input type="range" class="vranger"/>
