首先，将高度设置为大于宽度。从理论上讲，这就是您所需要的。在HTML5规格建议尽可能多的：

… UA根据样式表指定的高度和宽度属性的比率确定控件的方向。

Opera已经以这种方式实现了，但是Opera现在正在使用 WebKitBlink。到目前为止，还没有浏览器仅基于高度大于宽度来实现垂直滑块。

无论如何，都需要将高度设置为大于宽度，以确保浏览器之间的布局正确。应用左右填充也将有助于布局和定位。

对于Chrome，请使用-webkit-appearance: slider-vertical。

对于IE，请使用writing-mode: bt-lr。

对于Firefox，将orient="vertical"属性添加到html。可惜他们这样做了。视觉样式应通过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建议时
进行代码调整 。

不要 在网站上 使用
此属性：不仅是非标准的，而且其行为也从一个浏览器更改为另一个浏览器。none在不同的浏览器中，即使关键字在每个表单元素上的行为也不相同，有些根本不支持。

为在垂直滑块演示标题IE文档错误地表示比宽度将显示范围滑块垂直该设置高度大，但这并
_不_工作。在[代码部分中])，它显然不设置高度或宽度，而是使用writing- mode。由IE实现的writing-mode属性非常强大。可悲的是，在撰写本文时，规范的当前工作草案中定义的值要有限得多。如果IE的将来版本放弃对的建议，而现在提出的建议（相当于），则滑块将倒置显示。将来的版本很可能会扩展bt-lr``vertical-lr``tb-lr``writing-mode接受新的价值，而不是放弃对现有价值的支持。但是，很高兴知道您正在处理什么。