Simple Labels for HTML5 Slider (Input Type = Range)

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

  1. .rangeOption
  2.   float left
  3.   margin-left 2em
  4.   input
  5.     display block
  6.   .minLabel
  7.     float left
  8.     span
  9.       margin-left -50%
  10.   .maxLabel
  11.     float right
  12.     span
  13.       margin-left 50%

2 thoughts on Simple Labels for HTML5 Slider (Input Type = Range)

  1. OH NOES :(

    I understand you may like Jade and Stylus but I don’t see the value here. In your example, you’re saving just a few bytes. And as a “classic” web dev, it takes more time to understand. At first, I thought the Jade code was some JavaScript DSL.

  2. Thomas, it’s a cut-and-paste from a real-world project. I didn’t want to translate from Jade/Stylus just for this post (and the automatic generation isn’t perfect).

    I actually think the Stylus is clearer even if you do know CSS, due to the hierarchy.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>