Meter
Meter displays a scalar measurement within a range (like the native <meter>, but themed), coloring the bar as success, warning, or danger according to the low/high/optimum thresholds following the WHATWG algorithm. Use it to show disk usage, battery, a score, or any quantity with a "good" and "bad" range, rather than the progress of a task. It is agent-native: beyond role="meter" and ARIA attributes, it mirrors the live state in data-pura-meter-* attributes and registers each instance in window.__puraMeters (keyed by data-pura-id), as well as exposing a .state getter with the resolved snapshot and the level, so an agent can read or enumerate meters without digging through the DOM.
Preview
<div style="display:flex;flex-direction:column;gap:1.25rem;max-width:24rem">
<pura-meter label="Disk usage" value="42" min="0" max="64" value-text="42 GB" low="48" high="58" optimum="0"></pura-meter>
<pura-meter label="Battery" value="88" min="0" max="100" value-text="88%" low="20" high="80" optimum="100"></pura-meter>
<pura-meter label="CPU temperature" value="76" min="30" max="95" value-text="76 degrees C" low="60" high="80" optimum="40"></pura-meter>
</div>Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
value | number | min | Current measurement; clamped within [min, max]. |
min | number | 0 | Lower bound of the range. |
max | number | 1 | Upper bound of the range; raised to min if authored lower than min. |
low | number | min | Upper bound of the "low" segment; clamped to [min, max]. |
high | number | max | Lower bound of the "high" segment; clamped to [min, max] and ordered (>= low). |
optimum | number | (min + max) / 2 | Optimum point; decides which segment is success, which is warning, and which is danger. |
label | string | "" | Descriptive caption (e.g., "Disk usage"). Optional. |
value-text | string | numeric value | Overrides the displayed value string (e.g., "42 GB"). |
hide-value | boolean | false | Hides the value text, leaving only the bar and the label. |
Installation
pura is copy-paste and dependency-free. Load the whole library, or just this component.
<link rel="stylesheet" href="/pura/tokens.css">
<script type="module" src="/pura/lib/meter.js"></script>import "./pura/lib/meter.js";