Color Slider
Overview
A single-channel color slider for hue, alpha, and individual RGB/HSL/HSV/OKLCH channels. SColorSlider combines the Aria ColorSliderRoot/ColorSliderTrack/ColorSliderThumb primitives with the shared sliderVariants style recipe (via sliderVariants).
Use a color slider for a single color channel — typically the hue or alpha channel inside a color picker (paired with color-area).
Usage
Features
- 🧩 Aria/styled split —
ColorSliderCompactcomposes track + thumb;SColorSlideronly injects styles and forwards props/events - 🎚️ Single channel —
channelpickshue/alpha/saturation/lightness/red/green/blue/… across color spaces - 🎨 Color spaces —
colorSpace(e.g.hsl,rgb) withformatfor the emitted string - ⌨️ Keyboard — ArrowLeft/Right, PageUp/Down, Home/End adjust the channel;
role="slider" - ↔️ Orientation — horizontal/vertical via the shared slider primitives
- 📝 Form field — a hidden input via
namefor native form submission - 🔒 Disabled —
disableddisables interaction - 📐 6 sizes + colors — xs–2xl
size,coloraccent; per-slotuioverrides
Component family
SColorSlider(styled) — the entry wrapper;sliderVariantsrecipe with dynamic slot forwardingColorSliderRoot(Aria) — the state owner;modelValue/color,channel/colorSpace/format, value + commitColorSliderTrack(Aria) — the channel gradient trackColorSliderThumb(Aria) — the draggable position indicatorColorSliderCompact(Aria) — the aggregated composite; composes track + thumb
Demo
Basic
100%
#ec4899d9
API
Aria Layer
5ColorSlider
20 Props4 Emits
Props
| Prop | Type | Default | Description |
|---|---|---|---|
class | ClassValue | — | Additional class names applied to the root element. |
color | ThemeColor | — | Theme color of the component. |
size | ThemeSize | — | Visual size of the component. |
ui | Partial<ColorSliderUi> | — | Per-slot class overrides for the component. |
trackProps | ColorSliderTrackProps | — | Properties forwarded to the track element. |
thumbProps | ColorSliderThumbProps | — | Properties forwarded to the thumb element. |
modelValue | import("@soybeanjs/colord").AnyColor | — | Current model value. |
defaultValue | import("@soybeanjs/colord").AnyColor | — | Default value. |
colorSpace | ColorSpace | — | Color space. |
channel | ColorChannel | — | Channel. |
format | ColorFormat | — | Format. |
orientation | DataOrientation | — | Orientation of the component. |
dir | Direction | — | Reading direction of the component. |
inverted | boolean | — | Whether inverted. |
disabled | boolean | — | Whether the component is disabled. |
step | number | — | Step. |
name | string | — | The name of the field. Submitted with its owning form as part of a name/value pair. |
required | boolean | — | When `true`, indicates that the user must set the value before the owning form can be submitted. |
asChild | boolean | — | Change the default rendered element for the one passed as a child, merging their props and behavior. |
as | AsTag | Component | 'div' | The element or component this component should render as. Can be overwrite by `asChild` |
Emits
| Emit Name | Parameters | Description |
|---|---|---|
update:modelValue | string | Emitted when the model value changes. |
update:color | NormalizedColor | Emitted when the color value changes. |
change | string | Emitted when change occurs. |
changeEnd | string | Emitted when change end occurs. |
ColorSliderCompact
16 Props4 Emits
Props
| Prop | Type | Default | Description |
|---|---|---|---|
trackProps | ColorSliderTrackProps | — | Properties forwarded to the track element. |
thumbProps | ColorSliderThumbProps | — | Properties forwarded to the thumb element. |
modelValue | import("@soybeanjs/colord").AnyColor | — | Current model value. |
defaultValue | import("@soybeanjs/colord").AnyColor | — | Default value. |
colorSpace | ColorSpace | — | Color space. |
channel | ColorChannel | — | Channel. |
format | ColorFormat | — | Format. |
orientation | DataOrientation | — | Orientation of the component. |
dir | Direction | — | Reading direction of the component. |
inverted | boolean | — | Whether inverted. |
disabled | boolean | — | Whether the component is disabled. |
step | number | — | Step. |
name | string | — | The name of the field. Submitted with its owning form as part of a name/value pair. |
required | boolean | — | When `true`, indicates that the user must set the value before the owning form can be submitted. |
asChild | boolean | — | Change the default rendered element for the one passed as a child, merging their props and behavior. |
as | AsTag | Component | 'div' | The element or component this component should render as. Can be overwrite by `asChild` |
Emits
| Emit Name | Parameters | Description |
|---|---|---|
update:modelValue | string | Emitted when the model value changes. |
update:color | NormalizedColor | Emitted when the color value changes. |
change | string | Emitted when change occurs. |
changeEnd | string | Emitted when change end occurs. |
ColorSliderRoot
14 Props4 Emits
Props
| Prop | Type | Default | Description |
|---|---|---|---|
modelValue | import("@soybeanjs/colord").AnyColor | — | Current model value. |
defaultValue | import("@soybeanjs/colord").AnyColor | — | Default value. |
colorSpace | ColorSpace | — | Color space. |
channel | ColorChannel | — | Channel. |
format | ColorFormat | — | Format. |
orientation | DataOrientation | — | Orientation of the component. |
dir | Direction | — | Reading direction of the component. |
inverted | boolean | — | Whether inverted. |
disabled | boolean | — | Whether the component is disabled. |
step | number | — | Step. |
name | string | — | The name of the field. Submitted with its owning form as part of a name/value pair. |
required | boolean | — | When `true`, indicates that the user must set the value before the owning form can be submitted. |
asChild | boolean | — | Change the default rendered element for the one passed as a child, merging their props and behavior. |
as | AsTag | Component | 'div' | The element or component this component should render as. Can be overwrite by `asChild` |
Emits
| Emit Name | Parameters | Description |
|---|---|---|
update:modelValue | string | Emitted when the model value changes. |
update:color | NormalizedColor | Emitted when the color value changes. |
change | string | Emitted when change occurs. |
changeEnd | string | Emitted when change end occurs. |
ColorSliderThumb
2 Props
Props
| Prop | Type | Default | Description |
|---|---|---|---|
asChild | boolean | — | Change the default rendered element for the one passed as a child, merging their props and behavior. |
as | AsTag | Component | 'div' | The element or component this component should render as. Can be overwrite by `asChild` |
ColorSliderTrack
2 Props
Props
| Prop | Type | Default | Description |
|---|---|---|---|
asChild | boolean | — | Change the default rendered element for the one passed as a child, merging their props and behavior. |
as | AsTag | Component | 'div' | The element or component this component should render as. Can be overwrite by `asChild` |
Notes
Architecture and benchmark differences
ColorSliderCompact owns the track/thumb composition while every primitive stays style-free and only the UI wrapper injects the shared sliderVariants classes. This mirrors radix-ui-color/shadcn-ui headless split. Ant Design, Element Plus, Mantine and Naive UI embed the hue/alpha slider inside the color-picker; VeanUI exposes a standalone single-channel slider with color-space/channel control, keyboard interaction, native form input and a size scale.
| Capability | VeanUI | shadcn/ui | Ant Design | Element Plus | Mantine | Naive UI |
|---|---|---|---|---|---|---|
| Aria/styled split | ✅ | ✅ | — | — | — | — |
| Any channel (hue/alpha…) | ✅ | ✅ | — | — | — | — |
| Multiple color spaces | ✅ | ✅ | — | — | — | — |
| Keyboard interaction | ✅ | ✅ | ✅ | ✅ | ✅ | — |
| Native form input | ✅ | ✅ | — | — | — | — |
| Sizes (6) | ✅ | — | — | — | — | — |
— = unsupported or a different interaction model.
Cautions
modelValueaccepts a color string orColorValue;channelselects which channel the slider edits, andformatcontrols the emitted string.channelmust be valid for the chosencolorSpace(e.g.hue/alphainhsl).- The component emits
update:modelValue,update:color,changeandchangeEnd;changeEndfires on pointer/keyboard commit. - Provide
nameto submit the channel as a hidden form field. - Use with
color-area(saturation plane) inside acolor-pickerfor a complete editor.
Roadmap
N/A — color-slider is feature-complete for the current parity set.
FAQ
How do I use a color slider?
Bind model-value, choose a channel and format:
<SColorSlider v-model:model-value="color" channel="hue" format="hsl" />How do I edit alpha?
Set channel="alpha":
<SColorSlider v-model:model-value="color" channel="alpha" format="hsl" />How do I pair it with a color area?
Combine with SColorArea for the saturation plane:
<SColorArea v-model:model-value="color" format="hsl" />
<SColorSlider v-model:model-value="color" channel="hue" format="hsl" />