# ColorSlider

> A single-channel color control on a native `<input type="range">`, pairing a track painting the channel's gradient with a thumb reporting the current value and an `<output>` for its formatted display.

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

Renders the root host: a `<div>` stacking its children with a small gap,
resolving the channel, range, and value into component context and
mirroring the channel onto its own `data-channel` attribute.

## Examples

```tsx
<ColorSlider channel="hue" defaultValue={210}>
	<ColorSlider.Output htmlFor="accent-hue-thumb">210°</ColorSlider.Output>
	<ColorSlider.Track>
		<ColorSlider.Thumb id="accent-hue-thumb" aria-label={t("colorPicker.hue")} />
	</ColorSlider.Track>
</ColorSlider>
```

```tsx
<ColorSlider channel="alpha" min={0} max={1} defaultValue={1}>
	<ColorSlider.Track hue={210}>
		<ColorSlider.Thumb aria-label={t("colorPicker.alpha")} />
	</ColorSlider.Track>
</ColorSlider>
```

## Props

| Prop | Type | Description |
| --- | --- | --- |
| `channel` | `"hue" \| "saturation" \| "lightness" \| "alpha"` | The single channel this instance edits. |
| `min?` | `number` | Lower bound of the channel's range. Defaults to DEFAULT_MIN. |
| `max?` | `number` | Upper bound of the channel's range. Defaults to `channel`'s entry in DEFAULT_MAX_BY_CHANNEL. |
| `value?` | `number` | Current value, for an instance whose value the consumer tracks itself. |
| `defaultValue?` | `number` | Starting value, for an instance that never tracks its own value. |

Also accepts everything in `TagProps<"div">`.


### ColorSlider.Track

Renders the visual track: a `position: relative` `<div>` painting its whole length with the gradient the nearest ancestor ColorSlider's `data-channel` attribute selects, over a checkerboard backdrop.

| Prop | Type | Description |
| --- | --- | --- |
| `hue?` | `number` | The color's current hue, in degrees `0`–`360`, read into TRACK_HUE_PROPERTY at render time so a `"saturation"`, `"lightness"`, or `"alpha"` track's gradient matches it. Defaults to DEFAULT_HUE. |

Also accepts everything in `TagProps<"div">`.


### ColorSlider.Thumb

Renders the interactive thumb: a native `<input type="range">` reset to cover its enclosing ColorSlider.Track's entire box, so drag, arrow-key, and click-to-jump behavior spans the track's whole length.

Also accepts everything in `Omit<TagProps<"input">, "type" | "role">`.


### ColorSlider.Output

Renders a live readout: a native `<output>` reporting the formatted value passed as `children`.

Also accepts everything in `TagProps<"output">`.


## Types

| Name | Values | What it decides |
| --- | --- | --- |
| `Channel` | `"hue" \| "saturation" \| "lightness" \| "alpha"` | The single color channel one ColorSlider instance edits. |