Skip to content
PorabuildHeroGPUI component library
v0.14.0 · Apache-2.0
HeroGPUI

Colors

Color Slider

Adjust a single channel of a color.

Rust
use herogpui::components::color_picker::{ColorChannel, ColorSlider};

ColorSlider on docs.rsSource at v0.14.0

Usage

Showing Usage, live: HeroGPUI compiled to WebAssembly. The canvas has no accessibility tree; each example's description and code below carry the same information.

Usage

Runs in a view's render: self is the view holding this example's state and cx is its Context<Self>.

Rust
use herogpui::prelude::{ColorChannel, ColorSlider};
use herogpui::gpui::prelude::*;
use herogpui::gpui::px;
use herogpui::gpui;

let value = self.picker_color;

gpui::div()
    .flex()
    .flex_col()
    .items_start()
    .justify_center()
    .gap(px(12.))
    .children(vec![ColorSlider::new(
        "color-slider",
        value,
        ColorChannel::Hue,
    )
    .default_value(value)
    .into_any_element()])

Disabled

Runs in a view's render: self is the view holding this example's state and cx is its Context<Self>.

Rust
use herogpui::prelude::{ColorChannel, ColorSlider};
use herogpui::gpui::prelude::*;
use herogpui::gpui::px;
use herogpui::gpui;

let value = self.picker_color;

gpui::div()
    .flex()
    .flex_col()
    .items_start()
    .justify_center()
    .gap(px(12.))
    .children(vec![ColorSlider::new(
        "color-slider-disabled",
        value,
        ColorChannel::Hue,
    )
    .is_disabled(true)
    .into_any_element()])

Vertical

Runs in a view's render: self is the view holding this example's state and cx is its Context<Self>.

Rust
use herogpui::prelude::{ColorChannel, ColorSlider, Orientation};
use herogpui::gpui::prelude::*;
use herogpui::gpui::px;
use herogpui::gpui;

let value = self.picker_color;

gpui::div()
    .flex()
    .flex_wrap()
    .items_center()
    .justify_center()
    .gap(px(12.))
    .children(vec![ColorSlider::new(
        "color-slider-vertical",
        value,
        ColorChannel::Hue,
    )
    .orientation(Orientation::Vertical)
    .length(px(160.))
    .into_any_element()])

Controlled

Runs in a view's render: self is the view holding this example's state and cx is its Context<Self>.

Rust
use herogpui::prelude::{ActiveTheme, ColorChannel, ColorSlider, ColorSwatch, PickerColor};
use herogpui::gpui::prelude::*;
use herogpui::gpui::{App, px};
use herogpui::gpui;

let value = self.picker_color;

gpui::div()
    .flex()
    .flex_col()
    .items_start()
    .justify_center()
    .gap(px(12.))
    .children(vec![
        ColorSlider::new("color-slider-controlled", value, ColorChannel::Hue)
            .on_change(cx.listener(|this, c: &PickerColor, _, cx| {
                this.picker_color = *c;
                cx.notify();
            }))
            .into_any_element(),
        gpui::div()
            .flex()
            .flex_wrap()
            .items_center()
            .justify_center()
            .gap(px(12.))
            .children(vec![
                        ColorSwatch::new(value).into_any_element(),
                        para(&format!("Value: {}", value.to_hex()), cx),
                    ])
            .into_any_element(),
    ])

Also calls para (included when you copy).

Render Function

Runs in a view's render: self is the view holding this example's state and cx is its Context<Self>.

Rust
use herogpui::prelude::{ColorChannel, ColorSlider};
use herogpui::gpui::prelude::*;
use herogpui::gpui::px;
use herogpui::gpui;

let value = self.picker_color;

gpui::div()
    .flex()
    .flex_col()
    .items_start()
    .justify_center()
    .gap(px(12.))
    .children(vec![ColorSlider::new(
        "color-slider-render-state",
        value,
        ColorChannel::Hue,
    )
    .default_value(value)
    .thumb(|state| {
        gpui::div()
            .absolute()
            .inset_0()
            .flex()
            .items_center()
            .justify_center()
            .child(
                gpui::div()
                    .size(px(if state.is_dragging { 6. } else { 4. }))
                    .rounded_full()
                    .bg(if state.is_hovered {
                        gpui::black()
                    } else {
                        gpui::white()
                    }),
            )
            .into_any_element()
    })
    .into_any_element()])

Alpha Channel

Runs in a view's render: self is the view holding this example's state and cx is its Context<Self>.

Rust
use herogpui::prelude::{ColorChannel, ColorSlider};
use herogpui::gpui::prelude::*;
use herogpui::gpui::px;
use herogpui::gpui;

let value = self.picker_color;

gpui::div()
    .flex()
    .flex_col()
    .items_start()
    .justify_center()
    .gap(px(12.))
    .children(vec![ColorSlider::new(
        "color-slider-alpha",
        value,
        ColorChannel::Alpha,
    )
    .show_label(true)
    .into_any_element()])

HSL Channels

Runs in a view's render: self is the view holding this example's state and cx is its Context<Self>.

Rust
use herogpui::prelude::{ColorChannel, ColorSlider, ColorSpace};
use herogpui::gpui::prelude::*;
use herogpui::gpui::px;
use herogpui::gpui;

let value = self.picker_color;

gpui::div()
    .flex()
    .flex_col()
    .items_start()
    .justify_center()
    .gap(px(12.))
    .children([
        ColorChannel::Hue,
        ColorChannel::Saturation,
        ColorChannel::Lightness,
    ]
    .iter()
    .map(|ch| {
        ColorSlider::new(format!("color-slider-hsl-{ch:?}"), value, *ch)
            .color_space(ColorSpace::Hsl)
            .show_label(true)
    }))

Channels

Runs in a view's render: self is the view holding this example's state and cx is its Context<Self>.

Rust
use herogpui::prelude::{ColorChannel, ColorSlider, PickerColor};
use herogpui::gpui::prelude::*;
use herogpui::gpui::px;
use herogpui::gpui;

let value = self.picker_color;
let channels = [
    ColorChannel::Hue,
    ColorChannel::Saturation,
    ColorChannel::Brightness,
    ColorChannel::Alpha,
];

gpui::div()
    .flex()
    .flex_col()
    .items_start()
    .justify_center()
    .gap(px(12.))
    .children(channels
        .iter()
        .map(|ch| {
            ColorSlider::new(format!("color-slider-{ch:?}"), value, *ch)
            .on_change(cx.listener(
                |this, c: &PickerColor, _, cx| {
                    this.picker_color = *c;
                    cx.notify();
                },
            ))
            // `ColorSlider.Output`'s render function is
            // handed the colour: a swatch beside the value.
            .output(|color, text| {
                gpui::div()
                    .flex()
                    .items_center()
                    .gap(px(6.))
                    .child(
                        gpui::div()
                            .size(px(10.))
                            .rounded_full()
                            .bg(color.to_hsla()),
                    )
                    .child(text.to_owned())
                    .into_any_element()
            })
        }))

RGB Channels

Runs in a view's render: self is the view holding this example's state and cx is its Context<Self>.

Rust
use herogpui::prelude::{ColorChannel, ColorSlider, PickerColor};
use herogpui::gpui::prelude::*;
use herogpui::gpui::{px, rgb};
use herogpui::gpui;

let value = self.picker_color;

gpui::div()
    .flex()
    .flex_col()
    .items_start()
    .justify_center()
    .gap(px(12.))
    .children([
        ColorChannel::Red,
        ColorChannel::Green,
        ColorChannel::Blue,
    ]
    .iter()
    .map(|ch| {
        ColorSlider::new(format!("color-slider-rgb-{ch:?}"), value, *ch)
            .on_change(cx.listener(|this, c: &PickerColor, _, cx| {
                this.picker_color = *c;
                cx.notify();
            }))
    }))

Helpers used by these examples

Plain functions over the public API, defined once here and copied with each example that calls them.

para
fn para(text: &str, cx: &App) -> gpui::AnyElement {
    let colors = cx.colors();
    gpui::div()
        .text_size(px(14.5))
        .line_height(px(24.))
        .text_color(colors.foreground)
        .max_w(px(720.))
        .child(text.to_owned())
        .into_any_element()
}

Anatomy

Rust types

ColorSlider

Color Slider is assembled from these builders. The API reference lists each one.

Customization

Shared appearance belongs on ThemeBuilder::components and .recipe("name"). Typed builders change how Color Slider looks at one call site. Every builder also carries sx for placement, width and flex: it takes GPUI's own styling methods and refines them over the component's root after the theme, so an instance override wins. Behaviour builders live in the API reference below.

Styling

Color Slider styling
MethodValuesDescription
orientation(Orientation)horizontal | verticalSwitches the value axis and vertical layout direction.
Rust
// The one slot for caller-owned low-level styling: GPUI's
// styling methods, refined over the root element last.
.sx(|el| {
    el.bg(gpui::rgba(0xffa500ff))             // background
        .text_color(gpui::rgba(0x000000ff))   // text
        .w(gpui::px(13.))                     // size
        .h(gpui::px(12.))
})

API reference

Against HeroUI v3.2.6: 18 entries ported, 6 partial, 5 not ported. Partial rows are marked in the tables; entries not ported are listed under each table with the reason.

Builders

Color Slider builders
BuilderValuesDefaultDescription
new(id, value, channel)ColorChannel—Required channel supplied positionally and edited with its pinned range and step.
color_space(ColorSpace)PartialColorSpaceColorSpace::ValueColorSpaceSelects HSB, HSL, or RGB interpretation; invalid channel/space pairs are accepted rather than auto-corrected with a warning.
new(id, PickerColor, channel)string | Color—Controlled color waits for owner acceptance after pointer and keyboard reports.
default_value(PickerColor)string | Color—Seeds picker-owned color state once.
on_change(callback)Fn(value: Color) -> ()—Reports each changed pointer coordinate or keyboard step.
on_change_end(callback)Fn(value: Color) -> ()—Reports once on release and once for each completed keyboard change.
orientation(Orientation)horizontal | verticalOrientation::HorizontalSwitches the value axis and vertical layout direction.
is_disabled(bool)true | falsefalseRemoves focus, pointer, keyboard, and successful form submission while masking thumb interaction state.
name(text) + form_field()string—Registers the live channel number for FormData.
show_label / output / thumbPartialAnyElement | render closure—The monolithic Rust root composes built-in label, output, track, and thumb parts; root replacement is unavailable.
length(Pixels)Partialstring / render closure—Browser class customization and root-element substitution are unavailable; length provides geometry customization.
output(render)AnyElement | render closureformatted valueReplacement output receives current color and formatted channel text.
built-in trackPartialAnyElement | render closureColorSlider.ThumbThe built-in track owns the thumb; independent track render content and hover state are unavailable.
thumb(render)AnyElement | render closure—Caller content receives color, dragging, hovered, focused, focus-visible, and disabled state.
Not ported5 HeroUI entries not ported
Color Slider builders not ported
HeroUI v3Why it is not ported
ColorSlider.aria-labelGPUI exposes no accessibility-tree attribute surface.
ColorSliderRenderProps.color / orientation / isDisabledThe values are computed by the control but a root children render function is not exposed.
ColorSlider.Output.classNameBrowser classes are unavailable.
ColorSlider.Track.className / styleBrowser classes and inline-style render functions are unavailable.
ColorSlider.Thumb.className / styleBrowser class and inline-style render functions are unavailable.

Parts

Color Slider parts
PartDescription
ColorSliderValue, orientation, form, label/output layout, and interaction owner.
ColorSliderPartialBuilt-in channel name; arbitrary label composition is unavailable.
ColorSliderFormatted value or caller-rendered color/value content.
ColorSliderPartialGradient spans the thumb travel and meets matching endpoint colors under one rounded clip with the alpha checkerboard. Unblurred inset shadows shade the edges without an extra outline; the thumb stays outside the clip. Independent child render state is unavailable.
ColorSliderCurrent-color indicator, focus ring, and complete shared ColorThumb render state.

States

Color Slider states
StateBuilderDescription
Disabledis_disabledTrack dims, thumb uses default fill, interaction is removed, FormData is omitted, and thumb state is masked.
Draggingdragging keyed stateSame-value and changed-value presses expose live dragging state until global release.
Hoveredthumb_hovered keyed stateEnabled thumb hover reaches its render function.
Focusedfocus_handlePointer and keyboard focus reach thumb render state.
Focus visiblewith_focus_ring(thumb)Keyboard-origin focus rings the thumb rather than the whole track.
Color AreaColor FieldColor PickerColor SwatchColor Swatch Picker