Meter

A gauge within a known range.

<script setup lang="ts">
import { Meter } from '@shardsui/vue/meter'
</script>

<template>
  <Meter.Root class="grid w-60 max-w-full grid-cols-2 gap-y-2" :value="50">
    <Meter.Label class="text-sm font-normal text-gray-900">Daily goal</Meter.Label>
    <Meter.Value class="text-right text-sm text-gray-900" />
    <Meter.Track
      class="col-span-2 h-1 overflow-hidden rounded-sm bg-gray-50 inset-ring inset-ring-gray-200"
    >
      <Meter.Indicator class="bg-gray-500 transition-[width] duration-500" />
    </Meter.Track>
  </Meter.Root>
</template>

Anatomy

<script setup>
import { Meter } from '@shardsui/vue/meter'
</script>

<template>
  <Meter.Root>
    <Meter.Label />
    <Meter.Track>
      <Meter.Indicator />
    </Meter.Track>
    <Meter.Value />
  </Meter.Root>
</template>

API reference

Root

Groups all parts of the meter and provides the value for screen readers. Renders a <div> element with role="meter".

role="meter" requires an accessible name: render a Meter.Label inside Root, or pass aria-label to Root.

Track

Contains the indicator and represents the entire range of the meter. Renders a <div> element.

Indicator

Visualizes the position of the value along the range. Its width is set inline, from the value's percentage position in the range. Renders a <div> element.

Value

A text element displaying the current value. Hidden from screen readers, which read the value from Root. Renders a <span> element.

Label

An accessible label for the meter. Renders a <span> element.