Numeric range

Clamp to a stepped range, map a ratio to a value, and map slider keys to values.

Reach for it for sliders, knobs and meters. The helpers are pure: no DOM at import time or in the call path, so they run on the server and in tests. Each result below is computed when the page is built, by running the call shown.

Import

import {
	createNumericRange,
	valueFromSliderKey,
	fractionDigitsFromStep,
	resolveValuePrecision,
	formatNumericValue,
	valuesAlignOnStep,
} from '@ecopages/radiant-ui/helpers';

Range

createNumericRange(min, max, step) returns the bounds with clamp, ratioFor and valueFromRatio. A non-finite bound or a step that is not positive falls back to a default.

const range = createNumericRange(0, 100, 5);

Call	Result
`range.clamp(7)`	`5`
`range.ratioFor(25)`	`0.25`
`range.valueFromRatio(0.5)`	`50`
`valueFromSliderKey(range, 50, 'PageUp')`	`100`
`valueFromSliderKey(range, 50, 'ArrowLeft')`	`45`
`valueFromSliderKey(range, 50, 'a')`	`undefined`

Readout

Fraction digits follow the step unless a precision is given.

Call	Result
`fractionDigitsFromStep(0.25)`	`2`
`resolveValuePrecision(0.25, undefined)`	`2`
`resolveValuePrecision(0.25, 1)`	`1`
`formatNumericValue(2.5, 2)`	`"2.50"`
`valuesAlignOnStep(0.1 + 0.2, 0.3, 0.1)`	`true`