# Meter

Renders a native meter for a measurement within a known range.

## Signatures

```ts
export declare function Meter<const Options extends MeterOptions, const Host extends HostResult = never>(options: Options, host?: Dom.HostOverride<Dom.RenderHostProps<Options, MeterInternalProps<Options>>, Options["content"], Host>): import("./Dom/Types.js").HostComponent<Options | Host>;
```



## Examples

```ts
import { RefSubject } from "@typed/fx";
import { html } from "@typed/template";
import { component } 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`);
  return html`<section>
    <label for="storage-meter">Storage used</label>
    ${Meter.Meter({
      state, min: 0, max: 100, low: 60, high: 85, optimum: 0,
      content: description,
      props: { id: "storage-meter", "aria-valuetext": description },
    })}
    <p>${description}</p>
  </section>`;
});
```