Professional Meters' UI

© 2012, Martin Rinehart

Recommended display device: content creation, 700+ pixel width preferred.

Sample meters above are drawn with our Meter UI API. Those are not images, they are actual meters. See the Meters I/O page for input meters you can set and see results on output meters.

The goal of the Meter UI is to give the designer the freedom to design professional meters (thermometers, progress meters, RGB color selectors, HSB sliders and thousands more). This means the meters' UI must not require a Herculean effort by the frontend engineer (who invariably is facing other deadline issues). Any of the above meters can be completed in a few minutes using our Meter UI API.

Note: The two meters on the left are input meters, missing the handle that your visitor will drag up and down. See the Meter I/O page (next on the menu above) for input meters with handles.

Why Not HTML5

We have two new tags in HTML5: progress and meter, for output meters, and we have one new input type: <input type='range'> for meter-style input. Why not just use one?

There are two reasons. The first is IE9 (and earlier). If you wish to support HTML4-based browsers, HTML5 widgets aren't an alternative.

Second, the HTML5 specification does nothing for the background that these widgets require. You normally want some meter divisions (tic marks are the most common) and some numeric legends ('0' ... '255' for a color picker, '0.0' ... '1.0' for transparency, '0%' ... '100%' for progress, for examples). The meter UI here provides backgrounds that work well behind any meter, HTML5, jQuery UI or whatever.

For a more complete discussion of the rather sorry state of HTML5 meters, see our Meters HTML5 page (also on the menu above).

What About [My Favorite Library]?

Most slider widgets (the meter kind, not the photo display slider) are like the jQuery UI slider: naked. Like HTML5, they often need more information. Here, for example, is a screenshot of a graphic equalizer from the jQuery UI documentation:

Unlabeled sliders from a jQuery UI graphic equalizer.

This seems to cry out for a little work behind the sliders. Our Meter UI will happily back up jQuery's, or any other library's, meters. If you are not already using a library blessed with meters, our own alternative, Meters I/O page, will give you the functionality you want without wasted bytes.

Our UI

Actually, "Our UI" is a misnomer. Our goal is to make that "Your UI." We want it to work on your pages, not ours. Here are some points to note about the above examples.

You get to style your meters your way. This includes styling the whole meter and styling the bar, the bar's end caps and even the tic marks' labels.


There is really no end to the ways one can elaborate on meters. We've just begun.

How about built-in text labels? And how about running a text label vertically (90 degree rotation is easy in CSS3!) up the side of the meter?

We do this for fun, and we do it commercially. So send us that PSD. Or the cocktail napkin you scribbled on at the bar. As The Jazz Singer almost said, "You ain't seen nothin' yet!"

Feedback: MartinRinehart at gmail dot com

# # #