Origami Frontend Components & Services

Demos: o-meter

Simple Meter

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>

Simple Meter With Different Values Where Higher Is Better

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 &lt; high, value &lt; low, optimum &gt; 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 &lt; high, value &gt; low, optimum &gt; 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 &gt; high, value &gt; low, optimum &gt; 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>

Simple Meter With Different Values Where Lower Is Better

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 &gt; high, value &gt; low, optimum &lt; 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 &lt; high, value &gt; low, optimum &lt; 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 &lt; high, value &lt; low, optimum &lt; 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>

Meter With Optional Value Box

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>

Meter With Customised Colours

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>

Meter With Customised Dimensions

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>

Meter With Value Box And Customised Dimensions

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>
Support Status
maintained
Switch component view

GitHub Repository

Install o-meter

If using the Build Service, add o-meter@^2.0.4 to your link tag. Ensure the correct brand is set with a query parameter &brand=internal.

If running a Manual Build, run bower install --save "o-meter@^2.0.4".

Help & Support

o-meter is maintained directly by the Origami team. If you have any questions about o-meter or Origami in general, we are happy to help. 😊

Slack: #origami-support
Email: origami.support@ft.com

Feedback / Issues

To report a bug or request features please create an issue on Github. For support or general feedback please get in touch 😊

Slack: #origami-support
Email: origami.support@ft.com