# 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, then reporting the settled `{ min, max }` pair.

```ts
import { dualRange } from "@sdxc/ui/mixins";
```

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

```ts
dualRange(): MixinDescriptor<HTMLElement>
```

## Examples

```tsx
<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>`.

#### Signature

```ts
new DualRangeChangeEvent(init: { min: number; max: number; movedThumb: "min" | "max" })
```

#### Properties

| 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.

#### Signature

```ts
const SLIDER_THUMB_ATTRIBUTE = "data-thumb"
```

### SLIDER_THUMB_MIN

SLIDER_THUMB_ATTRIBUTE value the lower-bound thumb of a pair carries.

#### Signature

```ts
const SLIDER_THUMB_MIN = "min"
```

### SLIDER_THUMB_MAX

SLIDER_THUMB_ATTRIBUTE value the upper-bound thumb of a pair carries.

#### Signature

```ts
const SLIDER_THUMB_MAX = "max"
```