如何垂直显示范围输入滑块 [英] How to display a range input slider vertically

问题描述

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

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

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

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 Opera used to work in Opera, but not anymore. How can I orient an HTML5 range slider vertically?

推荐答案

首先，设置height大于width。在理论上，这是你应该需要的。 HTML5规格建议尽可能多：

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

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

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

Opera已经实现了这种方式，但Opera现在使用 WebKit 眨眼。到今天为止，没有浏览器仅仅基于高度大于宽度的方式实现垂直滑块。

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

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

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.

对于Chrome，请使用 -webkit-appearance：slider-vertical 。

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

对于IE，请使用 writing-mode：bt-lr 。

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

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.

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推荐已完成。

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 adjustments as newer browser versions are released and w3c recommendations are completed.

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

MDN contains an explicit warning against using -webkit-appearance on the web:

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

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

IE文档错误地指示设置高度大于width将垂直显示范围滑块，但这不工作 。在代码部分中，它显然不设置高度或宽度，而是使用 writing-mode 。 写入模式属性，如由IE实现的，是非常鲁棒的。可悲的是，规范的当前工作草案截至本文，更加有限。如果未来版本的IE下降支持 bt-lr ，赞成当前提出的 vertical-lr 相当于 tb-lr ），滑块将显示上下颠倒。很可能，未来的版本将扩展写模式以接受新值，而不是放弃对现有值的支持。但是，很高兴知道你正在处理什么。

The caption for the vertical slider demo in the IE documentation erroneously indicates that setting height greater than width will display a range slider vertically, but this does not work. In the code section, it plainly does not set height or width, and instead uses writing-mode. The writing-mode property, as implemented by IE, is very robust. Sadly, the values defined in the current working draft of the spec as of this writing, are much more limited. Should future versions of IE drop support of bt-lr in 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-mode to accept new values rather than drop support for existing values. But, it's good to know what you are dealing with.

这篇关于如何垂直显示范围输入滑块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！