Meter reports a known-range measurement such as storage use. It is neither editable input nor operation progress. Give the range a readable label and unit; min, max, low, high, and optimum describe that measurement.
import { RefSubject } from "@typed/fx";
import { component, html } from "@typed/template";
import * as Meter from "@typed/ui/Meter";
export const StorageUsage = component(function* () {
const state = yield* Meter.makeState({ value: 64 });
const description = RefSubject.map(state, ({ value }) => `${value} GB of 100 GB used`);
const meter = Meter.Meter({
state, min: 0, max: 100, low: 60, high: 85, optimum: 0,
content: description,
props: { id: "storage-meter", "aria-valuetext": description },
});
return html`<section>
<label for="storage-meter">Storage used</label>
${meter}
<p>${description}</p>
</section>`;
});