All right.
We have just finished looking at progress bars.
Very exciting.
But now I want to look at a different type of bar.
And this is known as a meter bar.
The meter element is visually similar to the progress element, but it has a very different purpose.
The meter bar represents a fixed value in a range that is defined by a min and max value.
Yeah, I know.
But you might be thinking like that's the same as the progress bar ... kind of.
Kind of.
But it serves a different purpose.
You typically use the meter attribute for fixed values like disk usage, or the relevance of a query result
or the fraction of a voting population that have selected a particular candidate or option.
So you can kind of view the meter as a gauge.
And in order to create the meter element, you need both a starting tag and an ending tag,
again, similar to the progress element. And the reason we insert information in between the tags is
to have a robust fallback technique for older browsers that do not support the meter element.
But unlike the progress element, the meter element has three important attributes to consider.
What are they?
Well, it's low,
it's high, and it's optimum.
What? ⁉
I know, I know.
Let me just explain a little bit more detail how these work.
Let's just create a meter element like this, right?
Opening tag, closing tag.
And we've got various attributes on here.
And this is how the meter looks.
Yes, it's very similar to the progress element.
Firstly, let's look at the min and max.
The min and max values represents the range, the entire range of your meter.
Okay.
The next thing, remember I said there are three important attributes, are low and high. And the low and high
values divide this range into three parts, as you can see.
Right?
The lower part of the range is between min and low inclusive.
The medium part of the range is between low and high.
This is in our example also the optimum range.
And then you've got the high part of the range.
And that is between high and max. And this optimum value, that defines the optimum value of the meter
element itself.
And don't worry, it can be quite confusing.
I'm going to hop over to the console.
I'm going to code some things up with you shortly, and I'll explain how this optimum attribute works.
What's very cool about this meter element is that three different colors are shown.
We've got green, which you saw in the previous example.
And green is just whether the values in the current preferred range of the meter. If the current value
is in the average part of the range, the bar is yellow.
Here our value is nine, which is less than ten, which means it's not ideal.
And this is why yellow is shown.
If the current value is in the worst part of the range though, the bar is red.
Don't worry, I'm going to show you green, orange and red shortly when we are coding up the meter bar in
the text editor. Okay, so there we go.
Let's move on.
Actually, you know what?
Instead of me telling you, I'm going to keep showing you examples, let me just hop over to the text
editor right now and let me start showing you how this meter works in more detail.