HelixOverviewDocsComponentsSandboxTheme builderCortexDocsEngramBuildingTraceBuildingRecallDeclaredServicesInsightsGet in touchSource on GitHub
Loading the reference
MeterView SourceEdit in SandboxView MarkdownCopy MarkdownOpen in ClaudeOpen in CursorA measurement in a known range, and whether it is where you want it.StableSince 0.1.0FeedbackUsageimport'@fusion.dev/helix/meter'import'@fusion.dev/helix-headless/meter'Preview
API ReferenceRoothelix-meterA measurement in a known range, and whether it is where you want it.
PropTypeDefaultDescriptionbandMeterBandThe band, said outright, where the three thresholds cannot say it.emphasis"subtle"How much ink the reading claims.highnumberBottom of the high band.labelstring"Meter"Accessible name for the reading.lownumberTop of the low band.maxnumber100Top of the range.minnumber0Bottom of the range.optimumnumberWhere in the range it is best to be.shape"arc"|"ring"Whether the reading is drawn as a bar, a ring or an arc.showValuebooleanfalseWhether the reading is shown beside the bar.valuenumber0Where the reading sits between `min` and `max`.valueTextstring""What the reading says, where a number is not the whole story.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
PartDescriptiongrooveThe unfilled circle, in `ring` and `arc`.indicatorThe part of it the value fills.tickA mark at `low` or at `high`.trackThe whole range.valueThe reading, under `show-value`.
CSS PropertyDescription--meter-alongWhere a bound sits on the arc, as a length along it.--meter-atWhere a bound sits on a linear track, as a percentage.--meter-colorThe fill, overriding the band's own tone.--meter-fractionThe value as a fraction of the range, 0 to 1.--meter-ring-sizeEdge length of the drawing, in `ring` and `arc`.--meter-ring-widthThickness of the stroke there.--meter-sizeHow thick the bar is.--meter-sweepHow much of the circle the arc covers, as a path length.--meter-tick-colorThe mark at a threshold.--meter-track-colorThe groove behind the fill.
Roothelix-headless-meterA measurement in a known range, and whether it is where you want it.
PropTypeDefaultDescriptionbandMeterBandThe band, said outright, where the three thresholds cannot say it.highnumberBottom of the high band.labelstring"Meter"Accessible name for the reading.lownumberTop of the low band.maxnumber100Top of the range.minnumber0Bottom of the range.optimumnumberWhere in the range it is best to be.shape"arc"|"ring"Whether the reading is drawn as a bar, a ring or an arc.showValuebooleanfalseWhether the reading is shown beside the bar.valuenumber0Where the reading sits between `min` and `max`.valueTextstring""What the reading says, where a number is not the whole story.
ReadTypeDescriptionwhenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
PartDescriptiongrooveThe unfilled circle, in `ring` and `arc`.indicatorThe part of it the value fills.tickA mark at `low` or at `high`.trackThe whole range, or the drawing in `ring` and `arc`.valueThe reading, under `show-value`.
CSS PropertyDescription--meter-alongWhere a bound sits on the arc, as a length along it.--meter-atWhere a bound sits on a linear track, as a percentage.--meter-fractionThe value as a fraction of the range, 0 to 1.--meter-sweepHow much of the circle the arc covers, as a path length.
ExamplesNameDescriptionBandA reading inside its good band, drawn as good.BandsThe same reading against low, high and optimum, which is what moves its color.BeyondA value past the maximum, which clamps rather than overflows.CountedA reading that says its own number, in words the reader chose.EmphasisOne reading being watched, and two that are context.Offset RangeA scale that does not start at zero, for a reading that never goes near it.PreviewA measurement in a known range, with its value shown.PreviewA measurement in a known range, with its value shown.RoundThe reading drawn as a ring rather than a bar.