Slider
A single- or multi-thumb range input with core-owned pointer and keyboard interaction.
Loading interactive demo…
let slider = Slider::new("volume", &state);
slider
.root().flex_col().gap(14.0)
.child(text("Volume"))
.child(slider.track().w(240.0).h(24.0))#Import
Import Slider from quickgui.
use quickgui::*;#Usage
let slider = Slider::new("volume", &state);
slider
.root().flex_col().gap(14.0)
.child(text("Volume"))
.child(slider.track().w(240.0).h(24.0))#Anatomy
Slider::rootSlider::labelSlider::valueSlider::controlSlider::trackSlider::rangeSlider::indicatorSlider::thumb
#API reference
Expand an entry for its description and complete signature. A dash means no declaration default is documented.
Slider
View sourcepub fn new(root_id: impl Into<ElementId>, state: &SliderState) -> Selfroot_idpub const fn root_id(self) -> ElementId—
statepub const fn state(self) -> SliderState—
track_idpub fn track_id(self) -> ElementId—
range_idpub fn range_id(self) -> ElementId—
thumb_idpub fn thumb_id(self, index: usize) -> ElementId—
label_idpub fn label_id(self) -> ElementId—
value_idpub fn value_id(self) -> ElementId—
control_idpub fn control_id(self) -> ElementId—
is_single_thumbpub const fn is_single_thumb(self) -> bool—
Whether this slider projects its value on the root instead of on each thumb.
pub const fn is_single_thumb(self) -> boolView sourcedisplay_valuepub fn display_value(self, format: &crate::ValueFormat) -> Arc<str>—
Format every thumb value into one string for a caller-owned value part. This is Base UI's Root `format` prop applied through the shared [`crate::ValueFormat`]. A range slider joins its thumbs with an en dash, which is the shape Base UI's Value renders by default.
pub fn display_value(self, format: &crate::ValueFormat) -> Arc<str>View sourcethumbpub fn thumb(self, index: usize) -> Option<SliderThumb>—
Describe one thumb. Indices at or past [`SliderState::thumb_count`] return `None` so a caller-driven loop stays bounded by the state instead of by its own arithmetic.
pub fn thumb(self, index: usize) -> Option<SliderThumb>View sourceSlider::root_with
View sourcepub fn root_with(self, root: Element) -> ElementDecorate an application-owned root without adding layout or appearance. A single-thumb slider becomes the focusable Slider itself. Pair it with [`Self::key_with`] to attach the typed keyboard actions.
Slider::root
View sourcepub fn root(self) -> ElementCreate the unstyled root part. Use [`Self::root_with`] to supply an existing element.
Slider::key_with
View sourcepub fn key_with<V: 'static>( self, cx: &mut ViewContext<'_, V>, root: Element, access: fn(&mut V) -> &mut SliderState, ) -> ElementAttach QuickGUI's typed slider keyboard actions to a single-thumb root. Install [`slider_key_bindings`] once on the application keymap. Multi-thumb sliders use [`SliderThumb::key_with`] instead so each thumb owns its own focus.
Slider::key
View sourcepub fn key<V: 'static>( self, cx: &mut ViewContext<'_, V>, access: fn(&mut V) -> &mut SliderState, ) -> ElementCreate the unstyled key part. Use [`Self::key_with`] to supply an existing element.
Slider::key_with_accessor
View sourcepub fn key_with_accessor<V: 'static>( self, cx: &mut ViewContext<'_, V>, root: Element, access: StateAccessor<V, SliderState>, ) -> ElementAttach the typed slider keyboard actions against a per-instance state accessor.
Slider::track_with
View sourcepub fn track_with(self, track: Element) -> ElementDecorate an application-owned track. Base UI uses [`Self::control_with`] as the larger interactive surface. A declaration that omits Control can keep the earlier behavior by attaching a [`crate::ViewContext::pointer_listener`] registered for [`Self::track_id`] and forwarding the event to [`SliderState::apply_pointer`] with the size the caller laid out.
Slider::track
View sourcepub fn track(self) -> ElementCreate the unstyled track part. Use [`Self::track_with`] to supply an existing element.
Slider::range_with
View sourcepub fn range_with(self, range: Element) -> ElementDecorate the application-owned fill between the slider's minimum and its value.
Slider::range
View sourcepub fn range(self) -> ElementCreate the unstyled range part. Use [`Self::range_with`] to supply an existing element.
Slider::indicator_with
View sourcepub fn indicator_with(self, indicator: Element) -> ElementBase UI's Indicator name for the filled part of the track. This is the same decorator as [`Self::range_with`]; both names stay supported.
Slider::indicator
View sourcepub fn indicator(self) -> ElementCreate the unstyled indicator part. Use [`Self::indicator_with`] to supply an existing element.
Slider::control_with
View sourcepub fn control_with(self, control: Element) -> ElementDecorate the caller-owned interactive area that carries the slider's pointer capture. Base UI separates the Control — the region a press acts on — from the Track it paints. Attach a [`crate::ViewContext::pointer_listener`] registered for [`Self::control_id`] and forward the event to [`SliderState::apply_pointer_change`] with the size the caller laid out. A caller that omits this part can keep pointer capture on [`Self::track_with`].
Slider::control
View sourcepub fn control(self) -> ElementCreate the unstyled control part. Use [`Self::control_with`] to supply an existing element.
Slider::label_with
View sourcepub fn label_with(self, label: Element) -> ElementAssign the stable mounted label target the slider points at. A single-thumb slider takes its accessible name from this part. A multi-thumb slider names its group from it, and each thumb still needs its own accessible name.
Slider::label
View sourcepub fn label(self) -> ElementCreate the unstyled label part. Use [`Self::label_with`] to supply an existing element.
Slider::value_with
View sourcepub fn value_with(self, value: Element) -> ElementAssign the stable mounted value target the slider points at. Put [`Self::display_value`] inside it; QuickGUI never renders the text itself.
Slider::value
View sourcepub fn value(self) -> ElementCreate the unstyled value part. Use [`Self::value_with`] to supply an existing element.
SliderThumb
View sourcepub const fn index(self) -> usizevaluepub const fn value(self) -> f64—
boundspub const fn bounds(self) -> (f64, f64)—
The inclusive bounds this thumb may move between, honoring its neighbors.
pub const fn bounds(self) -> (f64, f64)View sourcefractionpub fn fraction(self) -> f32—
is_activepub const fn is_active(self) -> bool—
thumb_idpub fn thumb_id(self) -> ElementId—
is_draggingpub const fn is_dragging(self) -> bool—
Whether a captured pointer is currently dragging this slider, Base UI's `data-dragging`.
pub const fn is_dragging(self) -> boolView sourcestatepub fn state(self) -> SliderThumbState—
A copyable render-state snapshot the application styles this thumb from.
pub fn state(self) -> SliderThumbStateView sourceoffsetpub fn offset(self, track_length: f32, thumb_length: f32) -> f32—
The leading-edge offset of this thumb along the track, honoring the thumb alignment. `track_length` and `thumb_length` are measured along the slider's own axis. This is the one place Base UI's `thumbAlignment` changes anything: `Center` lets the thumb overhang both ends, `Edge` keeps its box inside the track.
pub fn offset(self, track_length: f32, thumb_length: f32) -> f32View sourcevalue_textpub fn value_text(self, format: &crate::ValueFormat) -> Arc<str>—
Format this thumb's value, Base UI's Thumb `getAriaValueText` equivalent. Pass the result to `Element::accessibility_value` on the thumb; QuickGUI never renders it.
pub fn value_text(self, format: &crate::ValueFormat) -> Arc<str>View sourceSliderThumb::thumb_with
View sourcepub fn thumb_with(self, thumb: Element) -> ElementDecorate an application-owned thumb without adding layout or appearance. A single-thumb slider keeps its value on the root, so its thumb is decorative and hidden from assistive technology. Every thumb of a multi-thumb slider is an independently focusable Slider bounded by its neighbors.
SliderThumb::thumb
View sourcepub fn thumb(self) -> ElementCreate the unstyled thumb part. Use [`Self::thumb_with`] to supply an existing element.
SliderThumb::key_with
View sourcepub fn key_with<V: 'static>( self, cx: &mut ViewContext<'_, V>, thumb: Element, access: fn(&mut V) -> &mut SliderState, ) -> ElementAttach QuickGUI's typed slider keyboard actions to this thumb. Focusing the thumb also makes it the active thumb, so arrows move the thumb the user sees.
SliderThumb::key
View sourcepub fn key<V: 'static>( self, cx: &mut ViewContext<'_, V>, access: fn(&mut V) -> &mut SliderState, ) -> ElementCreate the unstyled key part. Use [`Self::key_with`] to supply an existing element.
SliderThumb::key_with_accessor
View sourcepub fn key_with_accessor<V: 'static>( self, cx: &mut ViewContext<'_, V>, thumb: Element, access: StateAccessor<V, SliderState>, ) -> ElementAttach this thumb's typed keyboard actions against a per-instance state accessor.
