# colorAreaDrag

> Drags a ColorArea root as one two-dimensional pointer gesture, mapping the pointer position onto paired horizontal- and vertical-axis range inputs and writing both together — the one update neither input's own drag handling can produce alone, since each tracks only its own axis.

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

Adds pointer-driven, two-dimensional dragging to a ColorArea root,
mapping each captured pointer's position onto the paired axis inputs
found via COLOR_AREA_AXIS_ATTRIBUTE and dispatching ColorAreaChangeEvent on settled pairs.

## Signature

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

Returns: A mixin descriptor for a ColorArea root's `mix` prop.

## Examples

```tsx
<div mix={[colorAreaDrag(), css({ position: "relative" })]}>
  <input type="range" data-color-area-axis="x" min={0} max={100} defaultValue={50} />
  <input type="range" data-color-area-axis="y" min={0} max={100} defaultValue={50} />
  <span aria-hidden="true" mix={css({ position: "absolute" })} />
</div>
```

## Used with it

The events, constants and types its module publishes, each imported from `@sdxc/ui/mixins` too.

### ColorAreaChangeEvent

Dispatched on a ColorArea's host by colorAreaDrag whenever a
pointer gesture settles both paired axis inputs on new values, so a
consumer can react to the pair without reading the two `<input>` elements itself.

#### Signature

```ts
new ColorAreaChangeEvent(init: Point)
```

#### Properties

| Property | Type | Description |
| --- | --- | --- |
| `x` | `readonly number` | Settled value of the horizontal-axis input, after mapping the pointer position through its own `min`–`max` range. |
| `y` | `readonly number` | Settled value of the vertical-axis input, after mapping the pointer position through its own `min`–`max` range. |

### COLOR_AREA_AXIS_ATTRIBUTE

`data-*` attribute a ColorArea's paired axis inputs carry so
colorAreaDrag can tell the horizontal-axis input from the
vertical-axis input.

#### Signature

```ts
const COLOR_AREA_AXIS_ATTRIBUTE = "data-color-area-axis"
```

### COLOR_AREA_AXIS_X

COLOR_AREA_AXIS_ATTRIBUTE value the horizontal-axis input of a pair carries.

#### Signature

```ts
const COLOR_AREA_AXIS_X = "x"
```

### COLOR_AREA_AXIS_Y

COLOR_AREA_AXIS_ATTRIBUTE value the vertical-axis input of a pair carries.

#### Signature

```ts
const COLOR_AREA_AXIS_Y = "y"
```