我发现一些意见和参考，似乎表明设置的高度大于宽度将导致浏览器自动改变方向，但在我的测试，只有在Opera用于在Opera，但不再工作。如何垂直定位HTML5范围滑块？
解决方法
… the UA determined the orientation of the control from the ratio of the style-sheet-specified height and width properties.
Opera已经实现了这种方式，但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属性。如果您打算在代码中使用它，请准备好在更新的浏览器版本发布和w3c建议完成时进行代码调整。
MDN contains an explicit warning在网络上使用-webkit外观：
Do not use this property on Web sites: not only is it non-standard,but its behavior change from one browser to another. Even the keyword
nonehas not the same behavior on each form element on different browsers,and some doesn’t support it at all.
IE documentation中垂直滑块演示的标题错误地表示设置高度大于宽度将垂直显示范围滑块，但这不起作用。在code section中，它明显不设置高度或宽度，而是使用写入模式。写模式属性，as implemented by IE，非常鲁棒。可悲的是，在写这篇文章的current working draft of the spec中定义的值受限。如果未来版本的IE下降支持bt-lr以支持当前提出的vertical-lr(这将等同于tb-lr)，滑块将显示上下颠倒。很可能，未来版本会将写入模式扩展为接受新值，而不是减少对现有值的支持。但是，很高兴知道你在处理什么。