[ @sdxc/ui/mixins ]
dualRange
Coordinates a two-thumb Slider's pair of native <input type="range"> elements, clamping the moved thumb to its partner's value the instant it would cross it.
import { dualRange } from "@sdxc/ui/mixins";Usage
Keeps a two-thumb Slider's paired <input type="range"> elements ordered,
clamping either thumb to its partner's value the instant it would cross
it, and dispatches DualRangeChangeEvent with the settled pair.
Signature
dualRange(): MixinDescriptor<HTMLElement>Examples
<div mix={dualRange()}>
<input type="range" data-thumb="min" min={0} max={100} defaultValue={20} />
<input type="range" data-thumb="max" min={0} max={100} defaultValue={80} />
</div>Used with it
The events, constants and types its module publishes, each imported from @sdxc/ui/mixins too.
DualRangeChangeEvent
Dispatched on a Slider group's host by dualRange whenever either
paired thumb settles on a new value, carrying both bounds together so a
consumer can render a combined readout without reading each <input>.
new DualRangeChangeEvent(init: { min: number; max: number; movedThumb: "min" | "max" })| Property | Type | Description |
|---|---|---|
min | readonly number | Current value of the lower-bound thumb, after clamping. |
max | readonly number | Current value of the upper-bound thumb, after clamping. |
movedThumb | "min" | "max" | Which thumb the consumer just moved, triggering this settled pair. |
SLIDER_THUMB_ATTRIBUTE
data-* attribute a Slider group's paired range inputs carry so
dualRange can tell the lower-bound thumb from the upper-bound
thumb; set it on both inputs the mixin should coordinate.
const SLIDER_THUMB_ATTRIBUTE = "data-thumb"SLIDER_THUMB_MIN
SLIDER_THUMB_ATTRIBUTE value the lower-bound thumb of a pair carries.
const SLIDER_THUMB_MIN = "min"SLIDER_THUMB_MAX
SLIDER_THUMB_ATTRIBUTE value the upper-bound thumb of a pair carries.
const SLIDER_THUMB_MAX = "max"