<meter> for HTML ranges

I recently rediscovered the <meter> tag, which is used for fractional values, such as "60% battery remaining", "3/5 stars", or denoting temperatures. It's an excellent tag for data-driven dashboards.

Let's look at the 3/5 stars example. Here's how it'll look:

Start with this HTML:

<meter min="0" max="5" value="3">3 out of 5 stars</meter>

Now let's draw our stars:

meter::before {
  content: "\2605\2605\2605\2605\2605";
  color: Orange;
}

meter[value="0"]::before {
  content: "\2606\2606\2606\2606\2606";
}

meter[value="1"]::before {
  content: "\2606\2606\2606\2606\2605";
}

meter[value="2"]::before {
  content: "\2606\2606\2606\2605\2605";
}

meter[value="3"]::before {
  content: "\2606\2606\2605\2605\2605";
}

meter[value="4"]::before {
  content: "\2606\2605\2605\2605\2605";
}

meter[value="5"]::before {
  content: "\2605\2605\2605\2605\2605";
}

So far this will display the stars and the bar drawn by <meter>. You can hide the bar with:

meter {
  appearance: none;
  overflow: hidden;
}

If you use the above code, note that setting the font-size on <meter> will change the size of the stars.

Lastly, the spec is pretty clear that it is not for progress, which should be marked up with <progress>. This all gets a little fuzzy around pagination, where you might have a "page 3 of 5" type of component, but the accessibility is likely pretty poor.

Read more about the <meter> tag on MDN.