如何垂直显示范围输入滑块

Question

我想垂直显示 <input type="range" /> 滑块控件。我只关心支持范围滑块控件的浏览器。

我发现一些评论和参考资料似乎表明将高度设置为大于宽度会导致浏览器自动更改方向，但在我的测试中，这仅适用于 Opera ，过去在 Opera 中也适用，但现在不再适用。如何垂直定位 HTML5 范围滑块？

原文由 gilly3 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

首先，设置高度大于宽度。从理论上讲，这就是您所需要的。 HTML5 规范建议：

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

Opera 以这种方式实现，但 Opera 现在使用WebKit Blink 。到今天为止，没有浏览器仅基于高度大于宽度来实现垂直滑块。现在 WHATWG 正在审查该建议。

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

对于 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; /* Chromium */
    width: 8px;
    height: 175px;
    padding: 0 5px;
}

 <input type="range" orient="vertical" />

---

免责声明：

该解决方案基于当前浏览器对 尚未 定义或未最终确定的 CSS 属性的实现。如果您打算在您的代码中使用它，请 准备好在更新的浏览器版本发布和 WHATWG 推荐完成时进行代码调整。当他们最终决定使用 CSS 属性来正式控制幻灯片方向时，请订阅 此 github 问题 以获取更新。

MDN 包含 有关在网络上使用 -webkit-appearance 的警告：

注意： 如果你想在网站上使用这个属性，你应该非常仔细地测试它。尽管大多数现代浏览器都支持它，但其实现各不相同。在较旧的浏览器中，即使是关键字 none 也不会在不同浏览器中对所有表单元素产生相同的效果，有些根本不支持。在最新的浏览器中差异较小。

尽管有这些警告，这个答案现在已经将近 9 年了，而且建议基本上没有变化。

原文由 gilly3 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

您可以使用 css 转换来执行此操作，但要注意容器的高度/宽度。你也可能需要把它放低：

 input[type="range"] {
   position: absolute;
   top: 40%;
   transform: rotate(270deg);
}

 <input type="range"/>

---

或等效的 3d 变换：

 input[type="range"] {
   transform: rotateZ(270deg);
}

您还可以通过将水平或垂直分别设置为 180 度或 90 度来使用它来切换幻灯片的方向。

原文由 MaxPRafferty 发布，翻译遵循 CC BY-SA 3.0 许可协议