Most web developers don’t realise that HTML5 range sliders can display graduation marks along their length by using an associated <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):

Lex Luthor’s Earthquake Machine

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.

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.

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:

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.
• This attribute could also carry a keyword, such as log, to produce logarithmic spacing, or other mathematical progressions.
• 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.

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.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.