For a favicon tool I’m working on, I tried using an HTML5 slider for the first time and was surprised to learn there’s no labels. Looked at a couple of shims out there, but they are just shims and don’t include labels either. So d-i-y …
The slider looks as below, and the CSS doesn’t make any assumptions about length of the slider or the two labels.
The labels are generated using the old margin 50% wrapper trick, as you can see in the following Jade markup and Stylus CSS:
input.rangeOption(type="range",min="0",max="1",step="0.1",title="Transparency: 0 to 1") .labels .minLabel span solid .maxLabel span transparent
[css] .rangeOption float left margin-left 2em input display block .minLabel float left span margin-left -50% .maxLabel float right span margin-left 50% [/css]