Meter

Basic meter example demonstrating core behavior.

Package: @solidiom/meter
Version: 0.0.1-next.0
Status: stable

Examples

import * as Meter from "@solidiom/meter"

;<div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
  <Meter.Root value={70} min={0} max={100} optimum={100}>
    70% used
  </Meter.Root>

  <Meter.Root value={30} min={0} max={100} low={30} optimum={100}>
    30% — low
  </Meter.Root>

  <Meter.Root value={90} min={0} max={100} high={80} optimum={0}>
    90% — high (inverted optimum)
  </Meter.Root>
</div>

The meter uses the native <meter> element for built-in accessibility. It derives a data-status of “safe”, “caution”, or “danger” based on value, low, high, and optimum. The data-value attribute is the normalized 0–1 ratio.

View source

        export function Root(props: MeterProps) {
  const min = () => props.min ?? 0
  const max = () => props.max ?? 1
  const normalized = () => {
    const range = max() - min()
    if (range <= 0) return 0
    return (props.value - min()) / range
  }
  const status = () => deriveMeterStatus(props.value, props.low, props.high, props.optimum)

  return (
    <meter
      value={props.value}
      min={min()}
      max={max()}
      low={props.low}
      high={props.high}
      optimum={props.optimum}
      class={props.class}
      data-value={normalized().toFixed(2)}
      data-status={status()}
      {...applySemanticAttrs({ scope: "meter", part: "root", state: status() })}
    >
      {props.children}
    </meter>
  )
}