# channelSync

> Keeps every track in a group of sibling ColorSlider channels painting a gradient that reflects what every other channel is currently settled on, since none of the independent `<input type="range">` thumbs can otherwise notice a sibling's value changing.

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

Keeps a group of sibling ColorSlider channel tracks painting a gradient
that stays current with one another as each channel's thumb settles, by
mirroring every settled value onto the others via colorChannelProperty.

## Signature

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

Returns: A mixin descriptor for a ColorSlider group's wrapping host's `mix` prop.

## Examples

```tsx
<div mix={channelSync()}>
  <div data-slot="track">
    <input type="range" data-channel="r" min={0} max={255} defaultValue={120} aria-label={t("colorSlider.red")} />
  </div>
  <div data-slot="track">
    <input type="range" data-channel="g" min={0} max={255} defaultValue={45} aria-label={t("colorSlider.green")} />
  </div>
  <div data-slot="track">
    <input type="range" data-channel="b" min={0} max={255} defaultValue={200} aria-label={t("colorSlider.blue")} />
  </div>
</div>
```

## Used with it

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

### ColorChannelChangeEvent

Dispatched on a ColorSlider group's host by channelSync every
time any channel's thumb settles on a new value, carrying every
channel's current value together so a consumer can compose the full color without reading each channel's own `<input>` itself.

#### Signature

```ts
new ColorChannelChangeEvent(init: { channel: string; values: Record<string, number> })
```

#### Properties

| Property | Type | Description |
| --- | --- | --- |
| `channel` | `readonly string` | Name of the channel whose thumb just fired the `input` event that triggered this report. |
| `values` | `readonly Readonly<Record<string, number>>` | Every channel's settled value, keyed by its own COLOR_CHANNEL_ATTRIBUTE name. |

### COLOR_CHANNEL_ATTRIBUTE

`data-*` attribute a ColorSlider channel's native range thumb carries,
naming the channel it controls. channelSync reads it, paired
with the thumb's own `valueAsNumber`, to tell one channel's value from the next.

#### Signature

```ts
const COLOR_CHANNEL_ATTRIBUTE = "data-channel"
```

### colorChannelProperty

Builds the CSS custom property name channelSync mirrors a given
channel's settled value onto, shared with whatever renders a group's
initial markup so both sides agree on the name without duplicating it.

#### Signature

```ts
colorChannelProperty(channel: string): string
```

Returns: The full custom property name for `channel`.

#### Parameters

| Parameter | Type | Description |
| --- | --- | --- |
| `channel` | `string` | Channel name, matching a COLOR_CHANNEL_ATTRIBUTE value. |

#### Examples

```tsx
colorChannelProperty("h"); // "--ui-color-slider-channel-h"
```