@financial-times/o-meter v4.0.0

o-meter

Use the meter element to measure data within a given range. The <meter> tag defines a scalar measurement within a known range, or a fractional value. This is also known as a gauge.

• Usage
• Markup
• Sass
• Support
• Migration
• Contact
• Licence

Usage

Check out how to include Origami components in your project to get started with o-meter.

Markup

This HTML demonstrates a way to use a basic o-meter

<meter
	class="o-meter"
	aria-label="a meter component"
	data-o-component="o-meter"
	min="0"
	max="100"
	value="25"
>
	25
</meter>

This HTML demonstrates a way to use an extended o-meter with an additional value indicator

<div class="o-meter-container">
	<meter
		class="o-meter"
		aria-label="a meter component"
		data-o-component="o-meter"
		min="0"
		max="100"
		value="75"
	>
		75
	</meter>
	<span class="o-meter-value" style="left: 75%"> 75 </span>
</div>

This HTML demonstrates a way to use a basic o-meter with customised colours. Colours are used to indicate how close the meter is to its optimum value.

To customise meter colours set the following CSS Customer Properties:

• --o-meter-background-color: The background colour for the empty meter.
• --o-meter-low-color (bad): The CSS colour for the meter element when its value is at its worse, less than sub optimal. E.g:
  • value < low and optimum > high; or
  • value > high and optimum < low
• --o-meter-high-color (suboptimal): The CSS colour for the meter element when its value is suboptimal. E.g:
  • value > low, value < high, and optimum > high
  • value < high, value > lower, and optimum < low
• --o-meter-optimum-color (good): The CSS colour for the meter element when its value is optimal. E.g:
  • value > high and optimum > high
  • value < low and optimum < low

This example uses inline styles but you may want to create a custom CSS class to share these styles with other meter elements in your project.

<meter
	class="o-meter"
	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;"
	aria-label="a meter component"
	data-o-component="o-meter"
	min="0"
	max="100"
	low="25"
	high="75"
	optimum="100"
	value="35"
>
	35
</meter>

This HTML demonstrates a way to use an extended o-meter with customised width and height

<div
	class="o-meter-container"
	style="--o-meter-width: 70%; --o-meter-height: 2em"
>
	<meter
		class="o-meter"
		aria-label="a meter component"
		data-o-component="o-meter"
		min="0"
		max="10"
		value="2.5"
	>
		2.5
	</meter>
	<span class="o-meter-value" style="left: 25%"> 2.5 </span>
</div>

Sass

@include oMeter;

Support

The meter tag is currently supported by Chrome, Safari, Firefox, Edge browsers. It is not supported by IE. If o-meter needs to be used on IE, please use a fallback - include the value in the meter tag, for example:

<meter data-o-component="o-meter" class="o-meter" value="0.6">60%</meter>

Migration

Contact

If you have any questions or comments about this component, or need help using it, please either raise an issue, visit #origami-support or email Origami Support.

Licence

This software is published by the Financial Times under the MIT licence.