Feedback

Meter

Bounded measurement gauge with meter semantics for readings like battery, quota, CPU, and memory utilization.

import { Meter } from '@lostgradient/cinder/meter';
feedbackmeasurementgauge
01

Overview

Bounded measurement gauge for fluctuating values like battery, quota, CPU, and memory usage.

Use Meter for static measurements with known bounds (role="meter"). Use Progress for task completion over time (role="progressbar").

Usage

svelte 
<script lang="ts">
  import Meter from '@lostgradient/cinder/meter';
</script>

<Meter value={52} ariaLabel="Battery level" />
Live preview
02

When to use

Use when
  • Showing a fluctuating value within a known minimum and maximum range.
  • Communicating low/optimal/high regions of a bounded measurement.
Avoid when
03

Examples

Basic meter

Bounded measurement for a fluctuating value.

Custom range

Map the meter to a non-zero bounded range.

Segmented thresholds

Render low, optimal, and high regions while preserving meter semantics for assistive technology.

04

Props

Props for meter
Name Type Default Required Bindable Description
value number 0 Current measurement value. Defaults to 0.
min number Lower bound for the range. Defaults to 0.
max number Upper bound for the range. Defaults to 100.
low number Lower threshold boundary for segmented rendering.
high number Upper threshold boundary for segmented rendering.
optimum number Optimal target value. Influences computed state semantics to match native meter expectations.
size 'sm' | 'md' | 'lg' 'md' Size token for track height. Default md.
ariaValueText text Human-readable text exposed via aria-valuetext. When omitted, aria-valuetext is not rendered. Example: 50% (6 hours remaining).
ariaLabel text Accessible name applied directly to the meter element when no visible label element is present.
ariaLabelledby text Id of a visible element that serves as the accessible name for the meter. Prefer this when a visible label exists.
05

Accessibility