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

GitHub Repository

Install o-meter

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

If running a Manual Build, run npm install "o-meter@^2.0.6".

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