Meter

Display a value within a known range using the native HTML meter element.

Demo

Storage used75%75%

Battery level30%30%

CPU usage90%90%

Usage

@styled_meter.meter(
  "storage",
  75.0,
  label="Storage used",
  value_text="75%",
)

@styled_meter.meter(
  "battery",
  30.0,
  low=20.0,
  high=80.0,
  optimum=100.0,
  label="Battery level",
  value_text="30%",
)

Props

Prop	Type	Default	Description
id	String	-	Meter ID
value	Double	-	Current value
min	Double	0	Minimum value
max	Double	100	Maximum value
low	Double?	None	Low threshold
high	Double?	None	High threshold
optimum	Double?	None	Optimal value
label	String?	None	Label text
value_text	String?	None	Value display text
class	String?	None	Additional CSS class

BEM Classes

Class	Description
`.meter`	Root container
`.meter__label`	Label element
`.meter__element`	Native meter element
`.meter__value`	Value text display

Accessibility

Uses native <meter> element for semantics
Label associated via for attribute
Browser handles color coding based on thresholds