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]