Range input with datalist
There’s another little tidbits I learned while working on the focal length equivalent tool: The HTML range-type <input> can have an associated <datalist> element to enhance its interface.
The datalist can specify input values as an <option> element. Supporting browsers – like Chrome for example – use this information to put little marks along the top of the range slider to indicate positions (= values) of particular interest.
I use this feature to mark common focal lengths in the 35mm format: 10 mm, 16 mm, 24 mm, 28 mm, 35 mm, 43 mm, 50 mm, 85 mm, 100 mm, 135 mm, and 200 mm.
What’s even cooler, is that Chrome lets the input’s handle snap to these positions.
Here’s a enlarged screenshot of what it looks like:
