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

Question

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

我发现一些 cmets 和引用似乎表明将高度设置为大于宽度会导致浏览器自动更改方向，但在我的测试中，只有 在 Opera 中有效曾经在 Opera 工作，但现在不在了。如何垂直定位 HTML5 范围滑块？

Answer 1

首先，设置高度大于宽度。从理论上讲，这就是您所需要的。 HTML5 Spec suggests as much：

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

Opera 以这种方式实现，但 Opera 现在使用 WebKit Blink。截至今天，没有浏览器实现仅基于高度大于宽度的垂直滑块。现在that suggestion is under review by 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 建议。订阅this github issue 以在他们最终决定使用 CSS 属性来正式控制幻灯片方向时获取更新。

MDN contains a warning 关于在网络上使用-webkit-appearance：

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

尽管有这些警告，但这个答案现在已经有将近 9 年的历史了，而且建议基本保持不变。

Answer 2

它非常简单。我已经使用-webkit-appearance: slider-vertical 实现了，它可以在 chrome、Firefox、Edge 上运行

<input type="range">

input[type=range]{
    writing-mode: bt-lr; /* IE */
    -webkit-appearance: slider-vertical; /* WebKit */
    width: 50px;
    height: 200px;
    padding: 0 24px;
    outline: none;
    background:transparent;
}

Answer 3

window.onload = function(){
var slider = document.getElementById("sss");
 var  result = document.getElementById("final");
slider.oninput = function(){
    result.innerHTML = slider.value ;
}
}

.slider{
    width: 100vw;
    height: 100vh;
   
    display: flex;
    justify-content: center;
    align-items: center;
}

.slider .container-slider{
    width: 600px;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: rotate(90deg)
}

.slider .container-slider input[type="range"]{
    width: 60%;
    -webkit-appearance: none;
    background-color: blue;
    height: 7px;
    border-radius: 5px;;
    outline: none;
    margin: 0 20px
    
}

.slider .container-slider input[type="range"]::-webkit-slider-thumb{
    -webkit-appearance: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: red;
}



.slider .container-slider input[type="range"]::-webkit-slider-thumb:hover{

box-shadow: 0px 0px 10px rgba(255,255,255,.3),
            0px 0px 15px rgba(255,255,255,.4),
            0px 0px 20px rgba(255,255,255,.5),
            0px 0px 25px rgba(255,255,255,.6),
            0px 0px 30px rgba(255,255,255,.7)

}


.slider .container-slider .val {
    width: 60px;
    height: 40px;
    background-color: #ACB6E5;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: consolas;
    font-weight: 700;
    font-size: 20px;
    letter-spacing: 1.3px;
    transform: rotate(-90deg)
}

.slider .container-slider .val::before{
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    display: block;
    border: 20px solid transparent;
    border-bottom-color: #ACB6E5;
    top: -30px;
}

<div class="slider">
  <div class="container-slider">
    <input type="range" min="0" max="100" step="1" value="" id="sss">
    <div class="val" id="final">0</div>
  </div>
</div>

Answer 4

.container {
    border: 3px solid #eee;
    margin: 10px;
    padding: 10px;
    float: left;
    text-align: center;
    max-width: 20%
}

input[type=range].range {
    cursor: pointer;
    width: 100px !important;
    -webkit-appearance: none;
    z-index: 200;
    width: 50px;
    border: 1px solid #e6e6e6;
    background-color: #e6e6e6;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#e6e6e6), to(#d2d2d2));
    background-image: -webkit-linear-gradient(right, #e6e6e6, #d2d2d2);
    background-image: -moz-linear-gradient(right, #e6e6e6, #d2d2d2);
    background-image: -ms-linear-gradient(right, #e6e6e6, #d2d2d2);
    background-image: -o-linear-gradient(right, #e6e6e6, #d2d2d2)
}

input[type=range].range:focus {
    border: 0 !important;
    outline: 0 !important
}

input[type=range].range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 10px;
    height: 10px;
    background-color: #555;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#4ddbff), to(#0cf));
    background-image: -webkit-linear-gradient(right, #4ddbff, #0cf);
    background-image: -moz-linear-gradient(right, #4ddbff, #0cf);
    background-image: -ms-linear-gradient(right, #4ddbff, #0cf);
    background-image: -o-linear-gradient(right, #4ddbff, #0cf)
}

input[type=range].round {
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px
}

input[type=range].round::-webkit-slider-thumb {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -o-border-radius: 5px
}

.vertical-lowest-first {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg)
}

.vertical-heighest-first {
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    transform: rotate(270deg)
}

<div class="container" style="margin-left: 0px">
    <br><br>
    <input class="range vertical-lowest-first" type="range" min="0" max="1" step="0.1" value="1">
    <br><br><br>
</div>

<div class="container">
    <br><br>
    <input class="range vertical-heighest-first" type="range" min="0" max="1" step="0.1" value="1">
    <br><br><br>
</div>


<div class="container">
    <br><br>
    <input class="range vertical-lowest-first round" type="range" min="0" max="1" step="0.1" value="1">
    <br><br><br>
</div>


<div class="container" style="margin-right: 0px">
    <br><br>
    <input class="range vertical-heighest-first round" type="range" min="0" max="1" step="0.1" value="1">
    <br><br><br>
</div>

来源：http://twiggle-web-design.com/tutorials/Custom-Vertical-Input-Range-CSS3.html

Answer 5

在不将位置更改为绝对位置的情况下，请参见下文。这也支持所有最近的浏览器。

.vranger {
  margin-top: 50px;
   transform: rotate(270deg);
  -moz-transform: rotate(270deg); /*do same for other browsers if required*/
}

<input type="range" class="vranger"/>

对于非常旧的浏览器，您可以使用 -sand-transform: rotate(10deg); from CSS sandpaper

或使用

前缀选择器，例如 IE9 的 -ms-transform: rotate(270deg);

Answer 6

您可以使用 css 转换来做到这一点，但要小心容器的高度/宽度。此外，您可能需要将其放置在较低的位置：

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

<input type="range"/>

---

或等效的 3d 变换：

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

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