Meter

A visual representation of a value within a known range.

<script lang="ts">
import { Meter, MeterIndicator, MeterLabel, MeterTrack, MeterValue } from "coss-svelte";
</script>

<Meter value={75}>
	<div class="flex items-center justify-between gap-2">
		<MeterLabel>Storage usage</MeterLabel>
		<MeterValue />
	</div>
	<MeterTrack><MeterIndicator /></MeterTrack>
</Meter>

Installation

Install the component package, shared coss-svelte theme, and Bits UI peer.

npm install coss-svelte @coss-svelte/theme bits-ui

Usage

Import the Svelte component exports directly from the package.

import { Meter, MeterIndicator, MeterLabel, MeterTrack, MeterValue } from "coss-svelte";

Anatomy

Meter
MeterIndicator
MeterLabel
MeterTrack
MeterValue

API Reference

Meter

A visual representation of a value within a known range.

Prop	Type	Default	Description
`value`	`number`	`70`	Current value for the component. Bind with `bind:value` when supported.
`min`	`number`	`0`	Minimum value for the control.
`max`	`number`	`100`	Maximum value for the control.
`label`	`string`	`""`	Accessible label or fallback visible label for the control.
`style`	`any`	`""`	Inline style forwarded to the rendered element.