npm i @velkin/react
import { VuColorSlider } from "@velkin/react/color-slider";| Prop | Type | Default | Description |
|---|---|---|---|
| channel | VuColorSliderChannel | "hue" | Which channel this slider edits. |
| value | string | "#808080" | Current color as a CSS string (two-way bindable). |
| colorSpace | "" | "hsb" | "hsl" | "rgb" | "" | Color model when not inferable from `value` / `channel`. Leave blank to auto-resolve. |
| orientation | VuColorSliderOrientation | "horizontal" | Layout axis. |
| step | number | NaN | Keyboard step in the channel's native units. NaN uses channel defaults. |
| baseColor | string | "" | Opaque color the alpha track fades up to; when blank, derived from the RGB of `value`. |
| label | string | "" | Accessible name. Defaults to a channel-appropriate label. |
| showErrors | boolean | false | Shows validation after activation. |
| validationActive | boolean | false | Drives invalid styling after activation. |
| invalid | boolean | false | True when the last validation run found errors. |
| Event | Detail | Description |
|---|---|---|
| vu-input | VuColorSliderChangeDetail | Continuous: every drag tick / key press. |
| vu-change | VuColorSliderChangeDetail | Commit: pointer release or discrete key move. |
| vu-invalid | CustomEvent | When validation messages are recomputed while `validationActive`. |
| Slot | Description |
|---|---|
| error | Replaces default validation message list when assigned. |
| Part | Description |
|---|---|
| track | The clickable gradient strip for the active channel. |
| thumb | The position indicator. |
| live | Visually-hidden live region announcing the value on commit. |
| field | Column that stacks the track and optional error. |
| error-message | Region for `slot="error"` or stacked default validation lines. |
| error-line | One default validation string when `slot="error"` is empty. |
| Name | Definition |
|---|---|
| VuColorSliderChangeDetail | |
| VuColorSliderChannel | |
| VuColorSliderColorSpace | "" | |
| VuColorSliderOrientation | |