Meter

Show an exact bounded measurement and classify it against quality thresholds.

Usage

Threshold zones

Classify the value as optimum, suboptimal, or even less good from explicit thresholds.

Storage healthClassify the value as optimum, suboptimal, or even less good from explicit thresholds.82 GB used

<!-- Meter / Threshold Zones -->
<script setup lang="ts">
import { MeterRoot, MeterTrack, MeterIndicator, MeterValueText } from '@sectile/vue/meter'
</script>

<template>
  <MeterRoot value="82" min="0" max="100" low="35" high="75" optimum="20" label="Storage health" v-slot="{ zone }">
    <MeterTrack><MeterIndicator /></MeterTrack>
    <MeterValueText />
    <span aria-hidden="true">{{ zone }}</span>
  </MeterRoot>
</template>

Exact decimal

Enter 0.1 as decimal text and preserve it without binary floating-point coercion.

Storage healthEnter 0.1 as decimal text and preserve it without binary floating-point coercion.0.1 GB used

<!-- Meter / Exact Decimal -->
<script setup lang="ts">
import { MeterRoot, MeterTrack, MeterIndicator, MeterValueText } from '@sectile/vue/meter'
</script>

<template>
  <MeterRoot value="0.1" min="0" max="0.3" low="0.1" high="0.2" optimum="0.15" label="Storage health" v-slot="{ zone }">
    <MeterTrack><MeterIndicator /></MeterTrack>
    <MeterValueText />
    <span aria-hidden="true">{{ zone }}</span>
  </MeterRoot>
</template>

Equal bounds

Represent the only valid value when the minimum and maximum are equal.

Storage healthRepresent the only valid value when the minimum and maximum are equal.7 GB used

<!-- Meter / Degenerate Range -->
<script setup lang="ts">
import { MeterRoot, MeterTrack, MeterIndicator, MeterValueText } from '@sectile/vue/meter'
</script>

<template>
  <MeterRoot value="7" min="7" max="7" label="Storage health" v-slot="{ zone }">
    <MeterTrack><MeterIndicator /></MeterTrack>
    <MeterValueText />
    <span aria-hidden="true">{{ zone }}</span>
  </MeterRoot>
</template>

API

Vue package: @sectile/vue/meter

Components

MeterRoot
MeterTrack
MeterIndicator
MeterValueText

Props

`MeterRootProps`

as: TypePrimitiveAsDefault'div'
Element or component rendered for this part.
asChild: TypebooleanDefaultfalse
Whether to merge this part into its single child instead of rendering a wrapper.
formatValue: TypeMeterValueFormatterDefaultundefined
Formats a value for visible text.
high: Typenumber | stringDefaultundefined
Lower boundary of the high-value region.
label: TypestringDefaultundefined
Accessible name announced for the control.
low: Typenumber | stringDefaultundefined
Upper boundary of the low-value region.
max: Typenumber | stringDefault100
Largest value accepted by the component.
min: Typenumber | stringDefault0
Smallest value accepted by the component.
optimum: Typenumber | stringDefaultundefined
Value that determines which threshold region is optimal.
value: Typenumber | stringDefaultRequired
Current value exposed by this contract.

`MeterPartProps`

as: TypePrimitiveAsDefaultVaries by part
Element or component rendered for this part.
asChild: TypebooleanDefaultfalse
Whether to merge this part into its single child instead of rendering a wrapper.

Slots

`MeterRootSlotProps`

high: Typestring
Lower boundary of the high-value region.
low: Typestring
Upper boundary of the low-value region.
max: Typestring
Maximum of the numeric range.
min: Typestring
Minimum of the numeric range.
optimum: Typestring
Value that determines the optimal threshold region.
percentage: Typenumber
Current value expressed as a percentage of its range.
value: Typestring
Current value exposed by this contract.
valueText: Typestring
Formatted text for the current range value when available.
zone: Type'optimum' | 'suboptimal' | 'even-less-good'
Quality region derived from the thresholds and optimum value.

Other types

`MeterValueFormatter`

type MeterValueFormatter = (value: string) => string

Parts

Shared scope: [data-scope="meter"]. Combine it with a part selector to keep styles local to this component.

Part	Selector	Role	Extra attributes
`root`	`[data-part="root"]`	Exposes the named read-only measurement and its exact range value.	`role="meter"` `data-zone="<zone>"` `data-percentage="<percentage>"`
`track`	`[data-part="track"]`	Provides the visual path for the bounded measurement.	—
`indicator`	`[data-part="indicator"]`	Fills the exact percentage without adding another accessible value.	`aria-hidden="true"` `data-zone="<zone>"` `data-percentage="<percentage>"`
`value-text`	`[data-part="value-text"]`	Displays the formatted value as text.	—

Keyboard interaction

Key	Behavior
`None`	The range display is read-only and defines no keyboard interaction.

Accessibility

The named read-only meter exposes its minimum, maximum, current value, and formatted value text without inventing ARIA threshold attributes.

See the corresponding WAI-ARIA pattern for the host accessibility contract.

Meter ​

Usage ​

Threshold zones ​

Exact decimal ​

Equal bounds ​

API ​

Props ​

MeterRootProps ​

MeterPartProps ​

Slots ​

MeterRootSlotProps ​

Other types ​

MeterValueFormatter ​

Parts ​

Keyboard interaction ​

Accessibility ​