[ @sdxc/ui/mixins ]

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.

View as Markdown Open in GitHub Open in ChatGPT Open in Claude

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

Usage

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

channelSync(): MixinDescriptor<HTMLElement>

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

Examples

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

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

Event

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.

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

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.

Constant

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.

const COLOR_CHANNEL_ATTRIBUTE = "data-channel"

Function

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.

colorChannelProperty(channel: string): string

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

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