Color Slider
Adjust a single channel of a color.
1use herogpui::components::color_picker::{ColorChannel, ColorSlider};Usage
1use herogpui::prelude::{ColorChannel, ColorSlider};
2
3ColorSlider::new(
4 "color-slider",
5 value,
6 ColorChannel::Hue,
7)
8.default_value(value)Live HeroGPUI compiled to WebAssembly. Select any example without loading another WASM instance.
Anatomy
Rust types
ColorSlider
Color Slider is assembled from these builders. The API reference lists each one.
Customization
Appearance builders and theme tokens Color Slider uses.
Styling
| Style | Description |
|---|---|
flex_col + gap(4) | The four-pixel label/output-to-track gap matches; uses flex rows instead of CSS grid areas. |
14px/20px MEDIUM label/output row | Placement, 14px size, explicit 20px line height, medium weight, and disabled label/output opacity split match; GPUI has no tabular-number switch. |
track_h=20 + COLOR_SLIDER_TRACK_INSET_PX | Cross-axis thickness, rounded total footprint, endpoint inset, and pointer travel match; the Rust gradient continues through the rounded caps rather than drawing separate solid endpoint fills. |
theme border | A theme border substitutes for the inset edge shadows. |
16px + rounded(16) + border(3) | Size, circular radius, border, current-color fill, and disabled default fill match; overlay shadow is absent. |
ColorSliderThumbState | Dragging state is exposed, but GPUI provides one pointer cursor for the track rather than a separate grabbing cursor. |
API reference
Builders
| Builder | Type | Default | Description |
|---|---|---|---|
new( | id, | — | Required channel supplied positionally and edited with its pinned range and step. |
color_space( | ColorSpace | ColorSpace:: | Selects HSB, HSL, or RGB interpretation; invalid channel/space pairs are accepted rather than auto-corrected with a warning. |
new( | id, | — | Controlled color waits for owner acceptance after pointer and keyboard reports. |
default_value( | PickerColor | — | Seeds picker-owned color state once. |
on_change( | Fn( | — | Reports each changed pointer coordinate or keyboard step. |
on_change_end( | Fn( | — | Reports once on release and once for each completed keyboard change. |
orientation( | Orientation | Orientation:: | Switches the value axis and vertical layout direction. |
is_disabled( | bool | false | Removes focus, pointer, keyboard, and successful form submission while masking thumb interaction state. |
name( | text) + form_field( | — | Registers the live channel number for FormData. |
show_label / output / thumb | AnyElement | | — | The monolithic Rust root composes built-in label, output, track, and thumb parts; root replacement is unavailable. |
length( | Pixels | — | Browser class customization and root-element substitution are unavailable; length provides geometry customization. |
output( | AnyElement | | formatted value | Replacement output receives current color and formatted channel text. |
built-in track | AnyElement | | ColorSlider. | The built-in track owns the thumb; independent track render content and hover state are unavailable. |
thumb( | AnyElement | | — | Caller content receives color, dragging, hovered, focused, focus-visible, and disabled state. |
Parts
| Part | Description |
|---|---|
ColorSlider | Value, orientation, form, label/output layout, and interaction owner. |
ColorSlider | Built-in channel name; arbitrary label composition is unavailable. |
ColorSlider | Formatted value or caller-rendered color/value content. |
ColorSlider | Gradient and pointer geometry owner; independent child render state is unavailable. |
ColorSlider | Current-color indicator, focus ring, and complete shared ColorThumb render state. |
States
| Builder | State | Description |
|---|---|---|
is_disabled | Disabled | Track dims, thumb uses default fill, interaction is removed, FormData is omitted, and thumb state is masked. |
dragging keyed state + ColorSliderThumbState | Dragging | Same-value and changed-value presses expose live dragging state until global release. |
thumb_hovered keyed state | Hovered | Enabled thumb hover reaches its render function. |
focus_handle + ColorSliderThumbState | Focused | Pointer and keyboard focus reach thumb render state. |
with_focus_ring(thumb) + focus_visible | Focus visible | Keyboard-origin focus rings the thumb rather than the whole track. |