HTML range input with snapping

I’m not a big fan of sliders except in very rare use cases, specifically those use cases where I am not involved. I recently had a request to make a year slider, because life is terrible.

I wanted to use a native HTML range input for this, as it should handle all the nasty touch input problems home grown range sliders can have. The trick was having the range indicator snap to available years after a change. Here’s my proof of concept:

You can use a datalist to set ticks at specific locations in all except Firefox, a visual cue to let people know where they can drag to. From there the range input change event searches an array of available values and picks the value closet to the drop point, setting the slider and text values to it. Bonus play button, because you just know that’s coming.

Styling range inputs in CSS is still the wild west of vendor prefixes and disappointment, so head down that path at your own risk.