Make html5 input[type=range] with many steps snap to the middle

Issue

I have an <input type=range> with a large number of allowed steps (in the range of 60,000).

Some of steps (for instance the mid-point) are more relevant and I would like a caret/snap to when the user moves close to them. How can I do that?

I am using the Angular and jQuery libraries.

Solution

There is a HTML5 feature that provides detent-snapping natively, using the list attribute and matching datalist element. Each element in the list becomes a detent point in the slider, with a tick-mark as well as snapping.

<input type="range" value="0" min="0" max="60000" step="1" list="my-detents">

<datalist id="my-detents">
  <option value="30000">
</datalist>

The datalist element can be placed anywhere in the HTML; it’s just defining the list (here named my-detents) for use by the input element.

According to MDN and caniuse.com, as of February 2019, use of datalist with range inputs is supported by Chrome, IE, Edge, and preview versions of Safari. (Firefox supports datalist for text inputs only.)

Answered By - Kevin Reid