Meter

Visual meter with low/medium/high tiers. Uses native ARIA meter role for accessibility.

Example

Value: 50

Inverted (higher is better)

Use invert when high values are good (e.g. battery, score) and low values are bad.

Props

Prop	Type	Default	Description
`value`	`number`	`0`	Current value
`min`	`number`	`0`	Minimum value
`max`	`number`	`100`	Maximum value
`low`	`number`	`33`	Threshold for low tier
`high`	`number`	`66`	Threshold for high tier
`class`	`string`	—	Additional CSS classes

Usage

<script>
  import { Meter } from '@chrissnell/chonky-ui';
</script>

<Meter value={25} low={33} high={66} />
<Meter value={50} low={33} high={66} />
<Meter value={80} low={33} high={66} />