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

Question

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

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

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 建议的完成而进行代码调整。订阅此 github 问题以在他们最终决定使用 CSS 属性来正式控制幻灯片方向时获取更新。

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

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

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

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 度。

Answer 3

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

.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);CSS砂纸

或使用

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

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

它非常简单。我已经使用 实现了-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 6

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>