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%

Ajax Functionality and Usability Patterns – Podcast 1 of 4: Widgets of the Web

And so, a new series begins, based on the Ajax functionality and usability patterns (Book: Part 4, pp 327-530). We’ve already looked at the technical details, now we’re looking at what Ajax can do for users and how to implement these features.

I’m asking guests to join me for most of the remaining Ajax Pattern podcasts. Seeing patterns from someone else’s perspsective will make the discussion richer and hopefully cover more questions you might have as you’re listening to the podcast. The guest for this week is Andre Charland of E-Business Applications, widget guru and author of the upcoming Enterprise Ajax book.

This 83-minute podcast covers nine patterns of Ajax widgets: