How to Use and Style the HTML5 Meter Element for Visual Indicators

By . in Coding. Updated on .

If you’re familiar with the HTML progress bar, which shows how much of an activity has been completed, you’ll find the meter element similar in that both display a current value out of a maximum value. However, unlike the progress bar, the meter is not used to indicate progress over time.

The meter element is used to display a static value within a specific range. For instance, you can indicate the storage space used on a disk by showing how much of the storage is occupied versus how much is available.

Moreover, the meter element can be used to visualize up to three regions within its range. Returning to the storage space example, you can visually indicate whether the occupied space is below 30%, between 30% and 60%, or above 60% using different colors. This helps users quickly understand how close they are to reaching the storage limit.

In this post, we’ll explore how to style the meter bar for both a simple gauge (with no region indicators) and more advanced examples featuring gauges with three color-indicated regions. Specifically, we will create a “marks” gauge for representing poor, average, and good marks, as well as a “pH” gauge for displaying acidic, neutral, and alkaline pH values.

Understanding Meter Attributes

Before diving into examples, let’s review the attributes of the meter element. A deeper exploration of these attributes, including their defaults, will be provided in the examples.

  • value – The value of the meter element.
  • min – The minimum value of the meter’s range.
  • max – The maximum value of the meter’s range.
  • 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 straightforward example using only one attribute: value. Before proceeding, there are three key points to note:

  1. The default min and max values for the meter range are 0 and 1, respectively.
  2. If the user-specified value does not fall within the meter’s range, it will default to either the min or max value, depending on which it is closest to.
  3. The ending tag is mandatory.

Here’s the syntax:

<meter value="0.5">0.5</meter>
HTML5 meter element example showing a value of 0.5 out of 1

Alternatively, you can add the min and max attributes to define a custom range:

<meter min="10" max="100" value="30"></meter>
HTML5 meter element example showing a value of 30 within a custom range of 10 to 100

2. Styling the “Marks” Gauge

To create a “marks” gauge, we’ll divide the range into three regions: low, middle, and high. This is where the low and high attributes come into play, dividing the range into:

  • Poor: 0-33
  • Average: 34-60
  • Good: 61-100

The corresponding attributes are: min="0" low="34" high="60" max="100".

Here is a visualization of the regions:

Visual representation of the meter element with Poor, Average, and Good regions

Even though our meter has three regions, it currently displays only two colors because optimum falls in the mid-region.

Setting the Optimum Point

The region where the optimum point falls is considered the “optimal region,” which is green by default. The adjacent regions are “sub-optimal” and are colored orange, while the farthest region is “non-optimal” and colored red.

In our example, we haven’t set an optimum value yet, so it defaults to 50, making the mid-region green and the others orange.

HTML5 meter element with default optimum point in the middle region
Example showing green and orange regions in HTML5 meter element

But that’s not what we want. We want the “Poor” region in red, “Average” in orange, and “Good” in green.

To achieve this, we will set optimum to a value in the “Good” region (61-100). In this example, we’ll use 90. This makes the “Good” region optimal (green), the “Average” region sub-optimal (orange), and the “Poor” region non-optimal (red).

HTML5 meter element styled with red, orange, and green regions

This is the result:

Final result of the HTML5 meter element styled with custom regions and colors

3. Styling the “pH” Gauge

Before we begin our final example, note that the CSS styles are User Agent-dependent and experimental.

A quick refresher on pH values: An acidic solution has a pH below 7, an alkaline solution has a pH above 7, and a neutral solution has a pH of exactly 7.

We’ll use the following attributes: low="7", high="7", max="14", with min defaulting to 0.

For colors, we’ll use Acidic (red), Neutral (white), and Alkaline (blue). The acidic region (below 7) will be considered “optimal.”

Here are the CSS pseudo-elements we’ll target to achieve the desired visual in Firefox (For Webkit meter pseudo-elements and more, refer to the links listed under “References”):

.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>
Final result of the pH gauge styled with custom colors

References

More on Hongkiat: Creating & Styling Progress Bar With HTML5

WebsiteFacebookTwitterInstagramPinterestLinkedInGoogle+YoutubeRedditDribbbleBehanceGithubCodePenWhatsappEmail