Meter

A graphical display of a numeric value within a range.

Storage Used

<script lang="ts">
	import { Meter } from '@sveltery/base/meter';
</script>

<Meter.Root class="grid w-60 max-w-full grid-cols-2 gap-y-2" value={24}>
	<Meter.Label class="text-sm font-normal text-neutral-950 dark:text-white">
		Storage Used
	</Meter.Label>
	<Meter.Value class="text-right text-sm text-neutral-950 dark:text-white" />
	<Meter.Track class="col-span-2 h-3 overflow-hidden bg-neutral-200 dark:bg-neutral-800">
		<Meter.Indicator class="bg-neutral-950 transition-[width] duration-500 dark:bg-white" />
	</Meter.Track>
</Meter.Root>

Anatomy

Import the component and assemble its parts:

Anatomy

<script lang="ts">
	import { Meter } from '@sveltery/base/meter';
</script>

<Meter.Root>
	<Meter.Label />
	<Meter.Track>
		<Meter.Indicator />
	</Meter.Track>
	<Meter.Value />
</Meter.Root>

API reference

Root

Groups all parts of the meter and provides the value for screen readers. Renders a <div> element.

format Intl.NumberFormatOptions | undefined —

Name: format
Description: Options to format the value. When omitted, the value is formatted as a percentage of the range.
Type: Intl.NumberFormatOptions | undefined

getAriaValueText function | undefined —

Name: getAriaValueText
Description: Returns the human-readable text for aria-valuenow. Receives the formatted clamped value and the raw value prop.
Type: ((formattedValue: string, value: number) => string) | undefined

locale Intl.LocalesArgument | undefined —

Name: locale
Description: The locale used by Intl.NumberFormat when formatting the value. Defaults to the user's runtime locale.
Type: Intl.LocalesArgument | undefined

max number | undefined 100

Name: max
Description: The maximum value.
Type: number | undefined
Default: 100

min number | undefined 0

Name: min
Description: The minimum value.
Type: number | undefined
Default: 0

value^* number —

Name: value
Description: The current value.
Type: number

render Snippet<[props: HTMLAttributes<HTMLDivElement>, state: MeterRootState, children: Snippet | undefined]> —

Name: render
Description: Replace the default <div>. Spread props onto the host and render children.
Type: Snippet<[props: HTMLAttributes<HTMLDivElement>, state: MeterRootState, children: Snippet | undefined]>

Track

Contains the meter indicator and represents the entire range of the meter. Renders a <div> element.

render Snippet<[props: HTMLAttributes<HTMLDivElement>, state: MeterTrackState, children: Snippet | undefined]> —

Name: render
Description: Replace the default <div>. Spread props onto the host and render children.
Type: Snippet<[props: HTMLAttributes<HTMLDivElement>, state: MeterTrackState, children: Snippet | undefined]>

Indicator

Visualizes the position of the value along the range. Renders a <div> element.

render Snippet<[props: HTMLAttributes<HTMLDivElement>, state: MeterIndicatorState, children: Snippet | undefined]> —

Name: render
Description: Replace the default <div>. Spread props onto the host and render children.
Type: Snippet<[props: HTMLAttributes<HTMLDivElement>, state: MeterIndicatorState, children: Snippet | undefined]>

Value

A text element displaying the current value. Renders a <span> element.

children Snippet<[formattedValue: string, value: number]> —

Name: children
Description: Custom value text. Receives the formatted clamped value and the raw value. Omit it to render the formatted value.
Type: Snippet<[formattedValue: string, value: number]>

render Snippet<[props: HTMLAttributes<HTMLSpanElement>, state: MeterValueState, children: Snippet | undefined]> —

Name: render
Description: Replace the default <span>. Spread props onto the host and render children.
Type: Snippet<[props: HTMLAttributes<HTMLSpanElement>, state: MeterValueState, children: Snippet | undefined]>

Label

An accessible label for the meter. Renders a <span> element.

render Snippet<[props: HTMLAttributes<HTMLSpanElement>, state: MeterLabelState, children: Snippet | undefined]> —

Name: render
Description: Replace the default <span>. Spread props onto the host and render children.
Type: Snippet<[props: HTMLAttributes<HTMLSpanElement>, state: MeterLabelState, children: Snippet | undefined]>