Using and Styling HTML5 Meter [Guide]

If you’re familiar with the HTML progress bar, which shows how much of an activity has been performed, you will find that the meter element is similar to that – both show a current value out of a maximum value. But unlike the progress bar, the meter bar is not to be used to show progress.

It is used to show a static value in a specific range, for example you can indicate the storage space used in a disk storage by showing how much of the storage space is filled and how much is not.

On top of that, the meter element can also be used to visualize up to three regions within its range. Reusing the storage space example, instead of only showing how much space is occupied, you can also visually indicate whether the occupied space is only sparsely filled (lets say below 30%) or near half full (between 30 to 60%) or more than half full (above 60%) using different colors. This helps the users know when they are reaching the storage limit.

In this post, we’ll show you how to style the meter bar for both purposes mentioned i.e. a simple gauge (with no indicated regions) and two examples of gauges with 3 color-indicated regions. For the latter, we will work on creating a "marks" gauge for showing poor, average and good marks, and a "pH" gauge for showing acidic, neural and alkaline pH values.

Attributes

Before we start with the examples and go in-depth, let us take a quick look into its list of attributes below, more about these attributes like their defaults, etc. will be covered in the examples.

• value – The value of the meter element


• min – The minimum value of the range of the meter


• max – The maximum value of the range of the meter


• low – Indicates the low boundary value


• high – Indicates the high boundary value


• optimum – The optimum point in the range

1. Styling A Simple Gauge

Here’s a very simple example using only one attribute, the value. Before we proceed, we need to know three things first:

(1) There is a default min and max value defining the range of meter, which is 0 and 1 respectively.
(2) If the user-specified value does not fall within the meter range, it will take the value of either min or max, whichever it is closest to.
(3) The Ending tag is mandatory.

Here is the syntax:

<meter value="0.5">0.5</meter>

Alternatively, we can also add min and max attributes thus providing a user defined range like so:

<meter min="10" max="100" value="30"></meter>

2. Styling The "Marks" Gauge

First, we need to divide the range into three regions (left/low, middle, right/high). This is were low and high attributes come into play. This is how the three regions are divided.

The three regions are formed between min & low , low & high and high & max.

Now it is obvious that there are certain conditions low and high values should follow for the three regions to be formed:

• low cannot be less than min and greater than high & max


• high cannot be greater than max and less than low & min.


• And when a criteria is broken both low and high will take on the value of the other variable in the criteria which is not satisfied, i.e. if low value is found lower than min which it shouldn’t be, low will get the min value.

In this example, we will consider our three regions from left to right to be:

• Poor: (0-33)


• Average: (34-60)


• Good: (61-100)

Hence, the following are values for the attributes; min="0" low="34" high="60" max="100".

Here is an image visualizing the regions.

Even though there are three regions in the meter we created just now, it will indicate only two "kinds" of regions in only two colors at the moment. Why? Because optimum is in the mid-region.

Optimum Point

In whichever region (of the three) the optimum point falls in, it is considered as an "optimal region" colored green by default. The region(s) immediately next to it is called the "sub-optimal region" and it is colored orange. The one farthest away is a "not-much-of-an-optimal region", colored red.

So far in our example we have not assigned a value for optimum. Hence, the default value becomes 50, making the mid-region the "optimal region" and the ones right next to it (both on the left and right) as "sub-optimal regions".

In short in the above case, any value to the meter element that falls into the mid-region is indicated by green; the rest orange.

That’s not what we want. We want it colored this way: Poor (red), Average (orange), Good (green)

Since the right-region is to be considered our optimal region, we will give optimum a value that will fall into the right-region (any value between 61-100, including 61 & 100).

We’re taking 90 for this example. This will make the right-region "optimal", the middle (its immediate next region) "sub-optimal" and the far left the "not-much-of-an-optimal" region.

This is what we will get on our gauge.

2. Styling The "pH" Gauge

Before we begin our final example, please take note of this that the CSS styles are User Agent dependent and experimental.

First, a breather on pH values. An acidic solution has a pH of less than 7, an alkaline solution has a pH of greater than 7 and if you land on 7, that’s a neutral solution.

Thus, we will use the following values and attributes:

low="7" , high="7", max="14", and the min will take the default value of zero.

Before we add the rest of the attributes to complete the code, let us decide on colors: Acidic (red), Neutral (white) and Alkaline (blue). Let us also consider the acidic region (left-region below 7) as "optimal"

Here are the CSS pseudo elements we will target to get the desired visual in firefox. (For the webkit meter pseudo elements and more, refer to the links listed under "reference".)

.ph_meter 
 background: lightgrey;
 width: 300px;

.ph_meter:-moz-meter-optimum::-moz-meter-bar 
 background:indianred;

.ph_meter:-moz-meter-sub-optimum::-moz-meter-bar 
 background: antiquewhite;

.ph_meter:-moz-meter-sub-sub-optimum::-moz-meter-bar 
 background: steelblue;

Here is the complete html code and the final result of the pH gauge.

<meter class="ph_meter" low="7" high="7" optimum="2" max="14" value="6"></meter>
<meter class="ph_meter" low="7" high="7" optimum="2" max="14" value="7"></meter>
<meter class="ph_meter" low="7" high="7" optimum="2" max="14" value="8"></meter>

References

• HTML5 Meter W3C spec


• List of webkit pseudo elements & classes


• List of vendor specific pseudo elements

More on Hongkiat: Creating & Styling Progress Bar With HTML5

Editor’s note: This is written for Hongkiat.com by Preethi R. Preethi is a .NET Web developer with a Java past and a bias for Firefox, Windows & DC Comic movies.

Using and Styling HTML5 Meter [Guide]