Slider — HeroGPUI

Usage

Labels and values use 14px text with a 20px line height, independent of the surrounding text style.

Live example

Rust

1use herogpui::prelude::Slider;
2use gpui::prelude::*;
3use gpui::px;
4
5gpui::div()
6    .w(px(320.))
7    .child(
8        Slider::new("slider-main", 30.)
9            .default_value(30.)
10            .label("Volume")
11            .show_value(true),
12    )

Live HeroGPUI compiled to WebAssembly. Select any example without loading another WASM instance.

Anatomy

Rust types

Slider

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

Customization

Appearance builders and theme tokens Slider uses.

Styling

Slider styling
Style	Description
`Slider::render flex_col + gap(px(4.))`	Root layout with label and output above the track.
`Slider::render text_size(px(14.)) + line_height(px(20.)) + FontWeight::MEDIUM`	Label and output typography.
`20px default-color track + small_radius + axis_inset(12px) + fill_start/fill_end caps`	Twenty-pixel track with transparent 12px end borders for the thumb overhang; fill caps paint those ends accent when the fill reaches them.
`absolute accent fill from fill_from to fill_to`	Accent span representing the selected interval.
`28x20 / 20x28 outer + 24x16 / 16x24 inner`	Accent outer handle with accent-foreground inner handle.
`DragState inner geometry scale; instant under gpui`	Dragging feedback and reduced-motion override.
`util::ring_if_focused`	Keyboard focus treatment.
`layout.disabled_opacity`	Whole-slider disabled treatment.

API reference

Builders

Slider builders
Builder	Type	Default	Description
`value(f32) / values(values)`	`f32 / values`	—	The current value or values (controlled).
`default_value(f32) / default_values(values)`	`f32 / values`	—	The initial value or values (uncontrolled).
`on_change(callback) / on_change_all(callback)`	`Fn(value: number \| number[]) -> ()`	—	Handler called whenever a thumb changes value.
`on_change_end(callback) / on_change_end_all(callback)`	`Fn(value: number \| number[]) -> ()`	—	Handler called once when a drag or keyboard step completes.
`min_value(f32)`	`f32`	`0`	The minimum value.
`max_value(f32)`	`f32`	`100`	The maximum value.
`step(f32)`	`f32`	`1`	The increment between valid values.
`format_options(NumberFormat)`	`NumberFormat`	—	Formats the displayed value; supports decimal, percent and currency without CLDR locale data.
`orientation(Orientation)`	`Orientation`	`Orientation::Horizontal`	The direction in which values increase.
`is_disabled(bool)`	`bool`	—	Disables every thumb and removes the slider from the tab order.
`label(value)`	`AnyElement \| render closure`	—	Compound slider content; the monolithic port exposes its label, output and thumb customizations as builders.
`output(render)`	`AnyElement \| render closure`	—	Custom output content handed every live value and its formatted thumb label.
`thumb(render)`	`AnyElement \| render closure`	—	Track content; the thumb closure receives each computed index and value.
`disabled_keys(indices)`	`bool`	—	Disables this thumb only and removes its form field and tab stop.
`thumb_names(names)`	`names`	—	Name of this thumb's submitted form value.

Parts

Slider parts
Part	Description
`Slider`	Root value, form, pointer and keyboard state owner.
`Slider`	Optional text label rendered above or beside the track.
`Slider`	Formatted current values or custom content rendered from the live value array.
`Slider`	Pointer and keyboard surface containing fill and thumbs.
`Slider`	Accent span from the minimum or between the outermost thumbs.
`Slider`	One draggable, focusable value handle per value.

States

Slider states
Builder	State	Description
`Orientation::Horizontal`	`Horizontal`	Values increase from left to right.
`Orientation::Vertical`	`Vertical`	Values increase from bottom to top.
`ring_if_focused + active_thumb`	`Focus visible`	The active enabled thumb carries the keyboard focus ring.
`DragState`	`Dragging`	Pointer drag state updates the value and scales the inner thumb to 90%; gpui applies the scale without CSS's 250ms ramp.
`Slider::is_disabled`	`Disabled slider`	All thumbs are inert, dimmed and removed from form submission and tab order.
`Slider::disabled_keys`	`Disabled thumb`	One thumb is inert and omitted while its siblings remain interactive.
`fill_from == 0`	`Fill start`	The accent fill reaches the low edge.
`fill_to == 1`	`Fill end`	The accent fill reaches the high edge.

Switch