Meter

A gauge within a known range.

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

<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>

Anatomy

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

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

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 meter 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.