通过滑块对输入信息进行确认_播放HTML5范围滑块输入

通过滑块对输入信息进行确认

Among the many new form elements that HTML5 has introduced, range is perhaps the oddest but also the most generally useful. Previously requiring a great deal of JavaScript coding or a framework to generate, you can now create a slide control natively in all modern browsers with a single element.

在HTML5引入的许多新表单元素中， range也许是最奇怪但也是最有用的。 以前需要大量的JavaScript编码或框架来生成，现在，您可以在所有现代浏览器中以单个元素原生地创建幻灯片控件。

range is particularly useful for forms in which three conditions exist:

range对于存在以下三个条件的形式特别有用：

• A wide range of numbers is equally available to the user.
  用户同样可以使用多种数字。
• There is a known upper and lower limit to the range.
  该范围有一个已知的上限和下限。
• The user is expected to “play” with their input, adjusting it frequently.
  期望用户“玩”他们的输入，并经常对其进行调整。

Think of a shipping form that judges the price of posting a package based on weight. The lowest weight might be an envelope with a sheet of paper (about 10 grams), with an upper limit of 2 kilos. Let’s say the price of shipping changes with every 100 grams added or removed. It’s very likely that the user will want to find the most economic deal, and could be expected to play within the weight limits for their package. In that case, appropriate markup could be:

想想一种可以根据重量判断包裹价格的运输方式。 最小的重量可能是一个信封，上面装有一张纸(约10克)，上限为2公斤。 假设运输价格每增加或减少100克就会发生变化。 用户很可能希望找到最经济的交易，并且有望在其包装的重量限制内发挥作用。 在这种情况下，适当的标记可能是：

<label for="weight">Weight</label>
<input type="range" id="weight" min="10" value="10" max="2000" step="100">

The alternatives – a drop-down select option or a number input - would be irritating to use, but a range slider is perfect.

使用替代选择( 下拉选择选项或number输入)会很烦人，但是range滑块非常理想。

In contrast, take a restaurant booking form, where the number of guests has an obvious upper and lower limit, but a user would be expected to approach the form with a set number already in mind. In that case, “playing” with a slider to find the right number of seats to book for the evening would be frustrating, making a number input would be far more appropriate.

相反，采用饭店预订表格，其中客人人数有明显的上限和下限，但是希望用户使用已经确定的人数来接近表格。 在这种情况下，使用滑块“玩”以找到晚上预定的正确座位数会很令人沮丧，因此输入number会更加合适。

设置，可访问性和属性 (Setup, Accessibility And Attributes)

At the basic level, a range input should have at least three attributes: min (the lowest accepted value), max (the highest) and value (the default, or starting value). Form inputs should have associated label elements, meaning that the range should also have an id attribute in most cases. Let’s use the example of a volume control:

在基本级别上， range输入应至少具有三个属性： min (可接受的最低值)， max ( max )和value (默认值或起始值)。 表单输入应具有关联的label元素，这意味着在大多数情况下，范围还应具有id属性。 让我们以音量控制为例：

<label for="fader">Volume</label>
<input type="range" min="0" max="5" value="3" id="fader">

Which produces:

产生：

Volume 卷

Note that the slider UI has a few unique features:

请注意，滑块UI具有一些独特功能：

• The slider button “snaps” as it is moved. By default, these snapping points correspond to the location of whole integers in the range.
  滑动按钮在移动时“快照”。 默认情况下，这些捕捉点对应于范围内整个整数的位置。

• When focused, the button can be moved with up/down cursor keys, just like the number input. (Not all browsers support this behavior yet).

  聚焦后，可以使用上/下光标键移动按钮，就像输入number一样。 (并非所有浏览器都支持此行为)。

• The extent of the slider does not change according to the value of max; instead, it is adjusted by changing the width of the element in CSS. The relative position of the snap points will be adjusted in response to this change.

  滑块的范围不会根据max的值而变化； 而是通过更改CSS中元素的width进行调整。 捕捉点的相对位置将根据此更改进行调整。

The “snapping” behavior of the range button can be particularly confusing when min and max are relatively close. As an example, let’s set of the range of the volume fader between 0 and 1:

当min和max相对接近时，范围按钮的“捕捉”行为可能会特别令人困惑。 例如，让我们将音量推子的范围设置为0到1 ：

<input type="range" min="0" max="1" value="1" id="fader">

Volume 卷

The button now snaps to the terminus of the range, with no intermediate positions. The solution is to introduce more granularity by using a step attribute value:

现在，该按钮将捕捉到范围的终点，没有中间位置。 解决方案是通过使用step属性值引入更多粒度：

<input type="range" min="0" max="1" value="1" id="fader" step=".05">

Note that just like the number input, step can be used to allow only certain integers in a range: you can accept only even numbers between min and max by setting step=2, for example. Also note that the use of HTML5 shortcuts is limited in this case: you must use quotes around values like 0.5 in order for the code to be valid. A value of all for step makes the slider register floating-point values, and is the finest level of control.

请注意，就像输入number一样， step可以用于只允许一个范围内的某些整数：例如，通过设置step=2 ，您可以只接受介于min和max之间的偶数。 还要注意，在这种情况下， HTML5快捷方式的使用受到限制：您必须使用诸如0.5之类的引号使代码有效。 all的step值使滑块寄存器浮点值，并且是最好的控制级别。

展示并演讲 (Show and Tell)

The range input doesn’t present a numerical readout of its value by default. To remedy that, we use the <output> element:

默认情况下， range输入不显示其值的数字读数。 为了解决这个问题，我们使用<output>元素：

<label for="fader">Volume</label>
<input type="range" min="0" max="100" value="50" id="fader" 
	step="1" oninput="outputUpdate(value)">
<output for="fader" id="volume">50</output>

Together with a little JavaScript:

加上一些JavaScript：

function outputUpdate(vol) {
	document.querySelector('#volume').value = vol;
}

Which (with the caveat noted below) produces:

产生(带有以下警告)的是：

Volume 卷

50%

50％

走向垂直 (Going Vertical)

Orienting a slider vertically on a web page will occasionally make sense: most users think of volume as “up” and “down”, for example, rather than side-to-side. A reasonable expectation is that using CSS transforms would rotate the element correctly, but that won’t work as expected. Right now, the three major browsers each have a distinct way of making a range input vertical:

在网页上垂直放置滑块有时会很有意义：例如，大多数用户将音量视为“向上”和“向下”，而不是并排放置。 一个合理的期望是，使用CSS转换会正确旋转元素，但是不会按预期工作。 现在，三种主要的浏览器都具有一种使range输入垂直的独特方法：

In Firefox, it’s an attribute: orient="vertical"

在Firefox中，它是一个属性： orient="vertical"

In Webkit, it’s CSS: -webkit-appearance: slider-vertical

在Webkit中，它是CSS： -webkit-appearance: slider-vertical

And Microsoft have chosen a rather, um, rather distinct solution: writing-mode: bt-lr;

微软选择了一个相当，非常，非常独特的解决方案： writing-mode: bt-lr;

In this case it’s my hope that the Mozilla approach becomes the standard, but right now orient=vertical will be flagged during validation. As always, expect things to change in the future.

在这种情况下，我希望Mozilla方法成为标准，但是现在在验证过程中会标记orient=vertical 。 与往常一样，期望将来会发生变化。

Combining all three would produce the following:

将这三个结合在一起将产生以下结果：

input.vertical {
	-webkit-appearance: slider-vertical;
	writing-mode: bt-lr;
}

The HTML:

HTML：

<input type="range" min="0" max="100" value="50" 
	class="vertical" orient="vertical">

… and the result you see above.

…以及您在上方看到的结果。

设置滑块样式 (Styling The Slider)

The appearance of the range slider can be customized completely in CSS, using a variety of pseudo-selectors:

可以使用各种伪选择器在CSS中完全自定义范围滑块的外观：

input[type=range],
	::-moz-range-track,
	 ::-ms-track {
	 -webkit-appearance: none;
	 background-color: 3f91e5;
	 width: 250px;
	 height:20px;
}

At this point, the slider button can be customized:

此时，可以自定义滑块按钮：

::-webkit-slider-thumb,
	::-moz-range-thumb,
	 ::-ms-thumb {
	-webkit-appearance: none;
	background-color: #666;
	width: 10px;
	height: 20px;
}

With the right selectors, the appearance of the slider can be made equivalent across browsers, as the default – dipping as it does into the UI of the operating system to determine the style of the element – can look very different from one browser to the next.

使用正确的选择器，可以使滑块的外观在所有浏览器中均等，因为默认值–像浸入操作系统的UI中以确定元素的样式一样–可能在一个浏览器和下一个浏览器中看起来非常不同。

Brenna OBrian has an excellent article on styling the range slider.

Brenna OBrian撰写了有关范围滑块样式的出色文章。

在范围滑块上生成刻度线 (Generating Tick Marks On The Range Slider)

The HTML5 spec allows for a particularly clever feature: linking the element to a datalist with numeric values via the list attribute will create a series of ticks along the length of the range bar, with the position of each tick determined by an option in the datalist. For example, a variation of our audio control:

HTML5规范提供了一个特别聪明的功能：通过list属性将元素链接到具有数值的datalist list将沿着范围栏的长度创建一系列刻度线，每个刻度线的位置由datalist的option确定。 例如，我们的音频控件的一种变体：

<label for="fader">Volume</label>
<input type="range" min="0" max="100" value="50" id="fader" 
	step="20" list="volsettings">
<datalist id="volsettings">
	<option>0</option>
	<option>20</option>
	<option>40</option>
	<option>60</option>
	<option>80</option>
	<option>100</option>
</datalist>

Combined with the CSS above, creates the following:

结合以上CSS，创建以下内容：

Volume 卷

In IE, these ticks can be customized by manipulating the appearance of the pseudo-elements ::-ms-ticks-before and ::-ms-ticks-after (the areas above and below the slider thumb, respectively).  Unfortunately no other browser yet supports this degree of control, and Firefox does not present any ticks at all, at least as of FF 29.

在IE中，可以通过处理伪元素::-ms-ticks-before和::-ms-ticks-after (分别位于滑块上方和下方的区域)的外观来自定义这些刻度。 不幸的是，还没有其他浏览器支持这种程度的控制，并且Firefox至少从FF 29起根本不显示任何滴答声。

I wrote a small JavaScript routine that will automatically generate a datalist for a range input that you might find useful.

我编写了一个小JavaScript例程，该例程将自动为可能会有用的range输入生成datalist 。

多个滑钮 (Multiple Slider Buttons)

In theory the range input should be able to take multiple comma-seperated values, generating multiple slider buttons:

从理论上讲 ， range输入应该能够采用多个逗号分隔的值，从而生成多个滑块按钮：

<input type="range" value="7,9" min="0"  max="10" name="range" multiple>

This would be very useful for indicating upper and and lower range limits, but sadly no browser (as of this writing) supports this feature of the specification. However, Lea Verou has written an excellent little polyfill to gain support for the time being.

这对于指示范围的上限和下限非常有用，但是遗憾的是，没有浏览器(在撰写本文时)支持该规范的功能。 但是， Lea Verou暂时编写了出色的小型polyfill来获得支持 。

表格不正确 (Out of The Form)

One of the benefits of HTML5 is that <input> elements no longer have to be associated with <form> tags, allowing you to place the elements anywhere on a page, not just in forms. This will make the range slider increasingly useful for all kinds of UI controls.

HTML5的优点之一是<input>元素不再需要与<form>标记关联，从而使您可以将元素放置在页面上的任何位置，而不仅仅是表单。 这将使范围滑块对于各种UI控件越来越有用。

浏览器兼容性和Polyfill解决方案 (Browser Compatibility & Polyfill Solutions)

The range input is supported in all modern browsers: all versions of Chrome, Safari and Opera; iOS 5+, IE 10+, Firefox 23 and higher.

所有现代浏览器均支持range输入：所有版本的Chrome，Safari和Opera； iOS 5以上版本，IE 10以上版本，Firefox 23及更高版本。

Making it work in older browsers is usually a matter of applying the right polyfill: html5slider by Frank Yan works very well for Firefox and rangeslider works well across all browsers as a polyfill if you're using JQuery, with many more options are available.

使它在较旧的浏览器中运行通常是应用正确的polyfill的问题：如果您使用的是JQuery，Frank Yan的html5slider在Firefox上效果很好， rangelider在所有浏览器上都可以作为polyfill很好地工作，还有更多可用选项 。

翻译自: https://thenewcode.com/757/Playing-With-The-HTML5-range-Slider-Input

通过滑块对输入信息进行确认