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

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

我发现一些评论和参考文献似乎表明设置高度大于宽度将导致浏览器自动更改方向，但在我的测试中，只有 works in Opera 曾经可以工作在歌剧中，但现在不再了。如何垂直调整 HTML5 范围滑块？

首先，设置高度大于宽度。这有助于在浏览器之间获得正确的布局。应用左右填充也有助于布局和定位。

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

对于 Firefox，添加orient="vertical"属性到html。可惜他们这样做了。视觉样式应通过 CSS 控制，而不是 HTML。

input[type=range][orient=vertical] {
    appearance: slider-vertical;
    width: 8px;
    height: 175px;
    padding: 0 5px;
}

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

我的答案曾经在这里有一个关于非标准化行为和网络波动性的免责声明，但这个答案已经有 10 多年的历史了，10 年前的相同 CSS 今天仍然有效。实际上MDN 在其文档中包含了同样的建议<input type="range">。请随意检查此答案的编辑历史记录以了解相关内容，但对我来说很明显，这不会很快改变。