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

88

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

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

html  css 
— 吉利3
source

Answers:

131

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

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

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

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

对于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建议时进行代码调整。

MDN包含针对-webkit-appearance在网络上使用的明确警告：

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

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

— 吉利3
source
2
+1免责声明-webkit-appearance-我不知道。它改变了一切。
— 罗宾·温斯洛
IE中type =“ range”的输入元素对宽度/高度/显示值非常敏感。使用Bootstrap时，其中一些值可能会被无意间覆盖（特别是如果您不按照答案中的说明使用CSS的话）。对于我的一个垂直范围，我使用如下CSS：.vert {-ms-writing-mode：bt-lr; / * IE / -webkit-appearance：垂直滑块；/ WebKit * /高度：210像素；宽度：20px！填充：0 5px; 显示：inline-block！important; }
— mp31415
1
我绝对不喜欢!important。最好加强选择器。而不是仅仅.vert使用类似的东西input[type=range].vert。
— gilly3 2014年
72

您可以使用CSS转换来做到这一点，但请注意容器的高度/宽度。另外，您可能需要将其降低：

input[type="range"] {
   position: absolute;
   top: 40%;
   transform: rotate(270deg);
}
<input type="range"/>
展开摘要

或等效的3d转换：

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

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

— 最大工作量
source
2
请注意，如果要使其对应于较高的值和较低的值，则需要将其设置为270。编辑了答案。
— 2015年8
1
我更喜欢这种方法，因为它支持自定义CSS样式。使用另一种方法，自定义样式使滑块变得有趣
— Kim T
1
这很简单，但很出色
— Christopher M.
您可以使用display：inline-block;来代替position：absolute。具有转换原点。
— Denis Giffeler
@DenisGiffeler绝对位置并不是此解决方案的真正组成部分，它只是使SO示例正确显示的一种便捷方法。根据您的用例，有很多方法可以完成定位。
— MaxPRafferty
22

无需将位置更改为绝对位置，请参见下文。这也支持所有最新的浏览器。

.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

— Ifeanyi Chukwu
source
还包括 transform-origin: center left;使滑块左对齐而不居中对齐的内容。
— DragonLord
3 

.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

— 巴希普尔
source
源链接包括演示，显示了具有不同样式处理的各种滑块。
— 乔什·哈布达斯
0

非常简单。我已经使用实现了-webkit-appearance: slider-vertical，它在chorme，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;
}
— 阿希克·戴（Ashiq Dey）
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.