meter

The meter component is a visual gauge used for measuring and displaying quantitative data.

To set the gauge range, use the min and max attributes, while high and low are used for threshold values, and optional optimum for the desired target value.

When the optimum value is provided, three colors are assigned for: the optimum value, values less than optimum, and values even less than good.

If no optimum value is given, only two colors are assigned for: the optimum value and values less than optimum, locating the optimum area in between.

table of content

component variations

meter with optimum value

Open on blank page
Inner text
<div class="a-meter">
  <label for="meter-1">Label</label>
  <meter
    id="meter-1"
    min="0"
    max="100"
    low="33"
    high="66"
    optimum="80"
    value="50"
    aria-valuenow="50"
    aria-valuemin="0"
    aria-valuemax="100"
    aria-labelledby="Inner text"
  >
    Inner text
  </meter>
</div>

meter without optimum value

Open on blank page
Inner text
<div class="a-meter">
  <label for="meter-2">Label</label>
  <meter
    id="meter-2"
    min="0"
    max="100"
    low="33"
    high="66"
    value="50"
    aria-valuenow="50"
    aria-valuemin="0"
    aria-valuemax="100"
    aria-labelledby="Inner text"
  >
    Inner text
  </meter>
</div>

meter with optimum value demonstrator

Open on blank page
<div class="a-meter">
  <label for="meter-example-without-optimum-value">Label</label>
  <meter
    id="meter-example-without-optimum-value"
    min="0"
    max="100"
    low="33"
    high="66"
    optimum="80"
    value="50"
    aria-valuenow="50"
    aria-valuemin="0"
    aria-valuemax="100"
  ></meter>
</div>

meter without optimum value demonstrator

Open on blank page
<div class="a-meter">
  <label for="meter-example-with-optimum-value">Label</label>
  <meter
    id="meter-example-with-optimum-value"
    min="0"
    max="100"
    low="33"
    high="66"
    value="50"
    aria-valuenow="50"
    aria-valuemin="0"
    aria-valuemax="100"
  ></meter>
</div>

additional content

demo

// Add randomly between 2 to 10% progress.
function setProgress(container: Element): void {
  let currentValue = Number(container.getAttribute('data-progress'));
  if (currentValue === 100) {
    currentValue = 0;
  }

  const progress: number = Math.floor(Math.random() * (10 - 2) + 5);
  let newValue: number = currentValue + progress;

  if (newValue > 100) {
    newValue = 100;
  }
  container.setAttribute('data-progress', `${newValue}`);
}

export default (): void => {
  const examples = document.querySelectorAll(
    '[id="meter-example-without-optimum-value"], [id="meter-example-with-optimum-value"]',
  );

  examples.forEach((container) => {
    window.setInterval(setProgress.bind(this, container), 1000);
  });
};

styles SCSS

.a-meter {
  display: flex;
  flex-direction: column;
  min-width: 8rem;

  label {
    @include size-m;

    color: var(--plain__enabled__front__default);
    margin-bottom: 0.5rem;
  }

  meter {
    background: var(--plain__enabled__fill__default); // Firefox fix
    border: 0; // Safari fix
    outline: 0.0625rem solid var(--plain__enabled__front__default);
    height: 0.5rem;
    width: 100%;
  }

  /* Chrome, Safari and Edge */
  ::-webkit-meter-inner-element {
    display: flex;
  }

  ::-webkit-meter-bar {
    border-radius: 0;
    border: 0;
    background: var(--plain__enabled__fill__default);
  }

  ::-webkit-meter-even-less-good-value {
    background: var(--major-signal-error__enabled__fill__default);
  }
  ::-webkit-meter-suboptimum-value {
    background: var(--major-signal-warning__enabled__fill__default);
  }
  ::-webkit-meter-optimum-value {
    background: var(--major-signal-success__enabled__fill__default);
  }

  /* Firefox (DONT TOUCH) */
  :-moz-meter-sub-sub-optimum::-moz-meter-bar {
    background: var(--major-signal-error__enabled__fill__default);
  }
  :-moz-meter-sub-optimum::-moz-meter-bar {
    background: var(--major-signal-warning__enabled__fill__default);
  }
  :-moz-meter-optimum::-moz-meter-bar {
    background: var(--major-signal-success__enabled__fill__default);
  }
}