# colorWheelDrag

> Reshapes a ColorWheel's underlying hue input into a ring the moment it attaches, then drags the root as one angular gesture: measures the pointer's clockwise angle around the root's center, converts it to a hue, and writes the hue input's `valueAsNumber`.

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

Adds pointer-driven, angular dragging to a ColorWheel root, reshaping its
hue input into a ring via COLOR_WHEEL_SHAPE_ATTRIBUTE, then mapping
each captured pointer's angle to a hue and dispatching ColorWheelChangeEvent on settled values.

## Signature

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

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

## Examples

```tsx
<div
	role="group"
	aria-label={hueLabel}
	mix={[colorWheelDrag(), css({ position: "relative" })]}
>
	<input type="range" min={0} max={360} step={1} defaultValue={0} aria-label={hueLabel} />
</div>
```

## Used with it

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

### ColorWheelChangeEvent

Dispatched on a ColorWheel's host by colorWheelDrag whenever a
pointer gesture writes the underlying hue input to a new value, so a
consumer can react to the settled hue without reading the `<input>` itself.

#### Signature

```ts
new ColorWheelChangeEvent(hue: number)
```

#### Properties

| Property | Type | Description |
| --- | --- | --- |
| `hue` | `readonly number` | Settled hue, in degrees, `0`–`360`, after mapping the pointer's angle through angleToHue. |

### COLOR_WHEEL_SHAPE_ATTRIBUTE

`data-*` attribute colorWheelDrag sets to
COLOR_WHEEL_SHAPE_CIRCULAR on its host the moment it attaches, so
ColorWheel's own static `css()` styling repaints its track as a ring.

#### Signature

```ts
const COLOR_WHEEL_SHAPE_ATTRIBUTE = "data-shape"
```

### COLOR_WHEEL_SHAPE_CIRCULAR

Value colorWheelDrag writes to COLOR_WHEEL_SHAPE_ATTRIBUTE
on attach.

#### Signature

```ts
const COLOR_WHEEL_SHAPE_CIRCULAR = "circular"
```