This demo shows a meter with a value of 33. Do not forget to add an aria-label attribute to describe your meter.
<meter class="o-meter" aria-label="demo meter 33" data-o-component="o-meter" min="0" max="100" value="33">
33
</meter>This demo shows four o-meter components with different values, where higher is better. HTML meter elements have min and max attributes, with a low and high range within. The optimum attribute indicates where along the min-max range is considered preferable.
<p>Higher values are best in the following meter. It has a value < high, value < low, optimum > high.</p>
<meter class="o-meter" aria-label="demo meter " data-o-component="o-meter" min="0" max="100" low="25" high="75" optimum="100" value="10">
</meter>
<p>Higher values are best in the following meter. It has a value < high, value > low, optimum > high.</p>
<meter class="o-meter" aria-label="demo meter " data-o-component="o-meter" min="0" max="100" low="25" high="75" optimum="100" value="35">
</meter>
<p>Higher values are best in the following meter. It has a value > high, value > low, optimum > high.</p>
<meter class="o-meter" aria-label="demo meter " data-o-component="o-meter" min="0" max="100" low="25" high="75" optimum="100" value="80">
</meter>This demo shows four o-meter components with different values, where lower is better. HTML meter elements have min and max attributes, with a low and high range within. The optimum attribute indicates where along the min-max range is considered preferable.
<p>Lower values are best in the following meter. It has a value > high, value > low, optimum < low.</p>
<meter class="o-meter" aria-label="demo meter " data-o-component="o-meter" min="0" max="100" low="25" high="50" optimum="0" value="60">
</meter>
<p>Lower values are best in the following meter. It has a value < high, value > low, optimum < low.</p>
<meter class="o-meter" aria-label="demo meter " data-o-component="o-meter" min="0" max="100" low="25" high="50" optimum="0" value="40">
</meter>
<p>Lower values are best in the following meter. It has a value < high, value < low, optimum < low.</p>
<meter class="o-meter" aria-label="demo meter " data-o-component="o-meter" min="0" max="100" low="25" high="50" optimum="0" value="10">
</meter>This demo show a meter with a value of 2.5 with an optional value box. Note that meter value and percentage can be different. Do not forget to add an aria-label attribute to describe your meter.
<div class="o-meter-container">
<meter class="o-meter" aria-label="demo meter 2.5" data-o-component="o-meter" min="0" max="10" value="2.5">
2.5
</meter>
<span class="o-meter-value" aria-hidden="true" style="left: 25%">
2.5
</span>
</div>This demo shows a meter with a value of 25 that was colour-customised. Do not forget to add an aria-label attribute to describe your meter.
<meter class="o-meter" aria-label="demo meter 80" style="
--o-meter-background-color: lightgray;
--o-meter-optimum-color: deeppink;
--o-meter-sub-optimum-color: hotpink;
--o-meter-less-than-sub-optimum-color: pink;" data-o-component="o-meter" min="0" max="100" low="25" high="75" optimum="100" value="80">
80
</meter>This demo shows a basic meter with a value of 25 with customised width and length. Do not forget to add an aria-label attribute to describe your meter.
<meter class="o-meter" aria-label="demo meter 25" style="
--o-meter-width: 300px;
--o-meter-height: 30px;" data-o-component="o-meter" min="0" max="100" value="25">
25
</meter>This demo shows a meter with a value of 25 with customised width and length. Do not forget to add an aria-label attribute to describe your meter.
<div class="o-meter-container" style="--o-meter-width: 70%; --o-meter-height: 2em">
<meter class="o-meter" aria-label="demo meter 25" data-o-component="o-meter" min="0" max="100" value="25">
25
</meter>
<span class="o-meter-value" aria-hidden="true" style="left: 25%">
25
</span>
</div>