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

How to display a range input slider vertically

提问by gilly3

I would like to display an <input type="range" />slider control vertically. I'm only concerned with browsers that support the range slider control.

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

I've found some comments and references that seem to indicate that setting the height greater than the width will cause the browser to change the orientation automatically, but in my testing, that only works in Operaused to work in Opera, but not anymore. How can I orient an HTML5 range slider vertically?

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

回答by gilly3

First, set height greater than width. In theory, this is all you should need. The HTML5 Spec suggests as much:

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

... the UA determined the orientation of the control from the ratio of the style-sheet-specified height and width properties.

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

Opera had it implemented this way, but Opera is now using WebKitBlink. As of today, no browser implements a vertical slider based solely on height being greater than width.

Opera 以这种方式实现，但 Opera 现在使用WebKit Blink。截至今天，没有浏览器实现仅基于高度大于宽度的垂直滑块。

Regardless, setting height greater than width is needed to get the layout right between browsers. Applying left and right padding will also help with layout and positioning.

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

For Chrome, use -webkit-appearance: slider-vertical.

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

For IE, use writing-mode: bt-lr.

对于 IE，请使用writing-mode: bt-lr.

For Firefox, add an orient="vertical"attribute to the html. Pity that they did it this way. Visual styles should be controlled via CSS, not HTML.

对于 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" />

---

---

Disclaimers:

免责声明：

This solution is based on current browser implementations of as yet undefined or unfinalized CSS properties. If you intend to use it in your code, be prepared to make code adjustmentsas newer browser versions are released and w3c recommendations are completed.

此解决方案基于尚未定义或未完成的 CSS 属性的当前浏览器实现。如果您打算在您的代码中使用它，请准备好随着更新的浏览器版本的发布和 w3c 建议的完成而进行代码调整。

MDN contains an explicit warningagainst using -webkit-appearanceon the web:

MDN 包含一个明确的警告，禁止-webkit-appearance在网络上使用：

Do not usethis property on Web sites: not only is it non-standard, but its behavior change from one browser to another. Even the keyword nonehas not the same behavior on each form element on different browsers, and some doesn't support it at all.

不要在 Web 站点上使用此属性：它不仅是非标准的，而且它的行为从一个浏览器到另一个浏览器都会发生变化。甚至关键字none在不同浏览器上的每个表单元素上的行为也不相同，有些甚至根本不支持它。

The caption for the vertical slider demo in the IE documentationerroneously indicates that setting height greater than width will display a range slider vertically, but this does notwork. In the code section, it plainly does not set height or width, and instead uses writing-mode. The writing-modeproperty, as implemented by IE, is very robust. Sadly, the values defined in the current working draft of the specas of this writing, are much more limited. Should future versions of IE drop support of bt-lrin favor of the currently proposed vertical-lr(which would be the equivalent of tb-lr), the slider would display upside down. Most likely, future versions would extend the writing-modeto accept new values rather than drop support for existing values. But, it's good to know what you are dealing with.

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

回答by MaxPRafferty

You can do this with css transforms, though be careful with container height/width. Also you may need to position it lower:

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

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

<input type="range"/>

---

---

or the 3d transform equivalent:

或等效的 3d 变换：

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

You can also use this to switch the direction of the slide by setting it to 180deg or 90deg for horizontal or vertical respectively.

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

回答by Ifeanyi Chukwu

Without changing the position to absolute, see below. This supports all recent browsers as well.

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

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

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

for very old browsers, you can use -sand-transform: rotate(10deg);from CSS sandpaper

很老的浏览器，你可以使用-sand-transform: rotate(10deg);从CSS砂纸

or use

或使用

prefix selector such as -ms-transform: rotate(270deg);for IE9

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

回答by Bashirpour

.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>

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

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