javascript 滑块_使用JavaScript在HTML5范围滑块上自动生成标记

javascript 滑块

Most web developers don’t realise that HTML5 range sliders can display graduation marks along their length by using an associated <datalist>:

大多数Web开发人员都没有意识到HTML5范围滑块可以通过使用关联的<datalist>沿长度显示刻度线：

<fieldset>
	<legend>Lex Luthor’s Earthquake Machine</legend>
	<label for="richter">Richter Scale</label>
	<input type="range" min="0" max="10" value="0" id="richter" step="1" list="richterscale">
	<datalist id="richterscale">
		<option>0</option>
		<option>1</option>
		<option>2</option>
		<option>3</option>
		<option>4</option>
		<option>5</option>
		<option>6</option>
		<option>7</option>
		<option>8</option>
		<option>9</option>
		<option>10</option>
	</datalist>
</fieldset>

Which produces the tick marks in supporting browsers (Chrome and IE10+, at this point):

它会在支持的浏览器(此时为Chrome和IE10 +)中产生刻度线：

Lex Luthor’s Earthquake Machine

Lex Luthor的地震机

Richter Scale 里氏量表

While neat, the <datalist> code is often redundant: the graduation marks on the slider most often match the incremented step value. This makes typing out the <datalist> options something of a chore, and makes the perfect opportunity to use JavaScript for progressive enhancement of the slider.

整洁的<datalist>代码通常是多余的：滑块上的分度标记通常与递增的step值匹配。 这使得键入<datalist>选项有些麻烦，并且为使用JavaScript 逐步增强滑块提供了绝佳的机会。

使用脚本生成滑块标记 (Using A Script to Generate Slider Marks)

The script is placed at the end of the page that contains the slider:

脚本位于包含滑块的页面的末尾：

function ticks(element) {
	if (element.hasOwnProperty('list') && element.hasOwnProperty('min') && element.hasOwnProperty('max') &&    element.hasOwnProperty('step')) {
	var datalist = document.createElement('datalist'),
	minimum = parseInt(element.getAttribute('min')),
	step = parseInt(element.getAttribute('step')),
	maximum = parseInt(element.getAttribute('max'));
	datalist.id = element.getAttribute('list');
	for (var i = minimum; i < maximum+step; i = i + step) {
		datalist.innerHTML +="<option value="+i+"></option>";
	}
element.parentNode.insertBefore(datalist, element.nextSibling);
}}
var lists = document.querySelectorAll("input[type=range][list]"),
arr = Array.prototype.slice.call(lists);
arr.forEach(ticks);

Very simply, the script looks for all the range elements on the page, checks to see if they have a list, step, min and max attribute, and uses the value of each to generate a matching datalist with option values incremented to step, producing a series of check marks.

很简单，脚本会在页面上查找所有range元素，检查它们是否具有list ， step ， min和max属性，并使用每个元素的值来生成匹配的datalist并将option值递增到step ，从而生成一系列的复选标记。

So given just the following:

因此，仅给出以下内容：

<label for="volume">Volume</label>
<input type="range" min="0" max="5" value="0" id="volume" step="1" list="volumeslider">

Produces:

产生：

Volume 卷

In supporting browsers, you can see that the result also scales to the width of the slider.

在支持的浏览器中，您可以看到结果也与滑块的宽度成比例。

未来的改进 (Future improvements)

There’s plenty of scope for improvement in this script:

此脚本有很多改进的余地：

• It would be useful to include a data-grads attribute that would contain a different increment from step, and use that as alternate spacing for the graduations.

  包含一个data-grads属性将很有用，该属性包含与step不同的增量，并将其用作刻度的替代间距。

• This attribute could also carry a keyword, such as log, to produce logarithmic spacing, or other mathematical progressions.

  此属性还可以带有关键字，例如log ，以产生对数间距或其他数学级数。

• Finally, the script could act as a polyfill to produce the graduation marks for Firefox and Safari, with a greater range of options, such as highlighting every tenth mark on the scale.
  最后，该脚本可以充当polyfill来为Firefox和Safari产生刻度，并具有更多的选择范围，例如突出显示刻度的十分之一。

I’ll work on making those changes to future versions of the script: keep an eye on the associated Gist, or follow me on Twitter to be alerted on future advancements.

我将对脚本的未来版本进行这些更改：密切关注相关的Gist ，或者在Twitter上关注我，以了解未来的进展。

翻译自: https://thenewcode.com/864/Auto-Generate-Marks-on-HTML5-Range-Sliders-with-JavaScript

javascript 滑块