Slider
Choose a value on a track.
Try it
Drag the slider to compare its preview and committed values. This preview runs the exact code sample below.
Basic use
use gpui::{Context};
use xgpui_luma::controls::slider::SliderEvent;
use xgpui_luma_look_radix as radix;
struct Example {
control: xgpui_luma::controls::slider::Slider,
preview: f32,
committed: f32,
}
impl Example {
fn new(cx: &mut Context<Self>) -> Self {
let control = radix::Slider::new("example")
.range(0..100)
.value(25.0)
.on_event(cx, |app, event: &SliderEvent, cx| {
match event {
SliderEvent::Change { value, .. } => {
app.preview = *value;
}
SliderEvent::Release { value, .. } => {
app.committed = *value;
}
_ => return,
}
cx.notify();
})
.spawn(cx);
Self { control, preview: 25.0, committed: 25.0 }
}
}Integration snippet, checked against the current SDK and Radix crates. cx is the initialized owner context. The control retains its callbacks; callback owners are held weakly. Render self.control.clone() in the owner’s view.
SDK behavior & customization
Use Change for live updates and Release for committed interaction values. Thumb IDs identify the changed thumb.
Relevant contracts: SliderRenderModel.
Use the module’s template contract for structural changes. Builder modifiers and item templates vary by control.
Events
Callbacks follow the existing SDK event stream. Registrations append, hold the owner weakly, and live until the control is released. cx.notify() requests an owner redraw. Compound payloads are borrowed; scalar values are passed by value.
| Event / payload | Callback |
|---|---|
Change { thumb_id: ThumbId, value: f32 } | .on_value_changed(cx, |app, thumb_id, value, cx| { … }) |
Release { thumb_id: ThumbId, value: f32 } | .on_release(cx, |app, thumb_id, value, cx| { … }) |
DragStart { thumb_id: ThumbId } | .on_drag_start(cx, |app, thumb_id, cx| { … }) |
DragEnd { thumb_id: ThumbId, value: f32 } | .on_drag_end(cx, |app, thumb_id, value, cx| { … }) |
ThumbAdded { thumb_id: ThumbId, value: f32 } | .on_thumb_added(cx, |app, thumb_id, value, cx| { … }) |
ThumbRemoved { thumb_id: ThumbId } | .on_thumb_removed(cx, |app, thumb_id, cx| { … }) |
ThumbSelected { thumb_id: ThumbId } | .on_thumb_selected(cx, |app, thumb_id, cx| { … }) |
FocusChanged { focused: bool } | .on_focus_changed(cx, |app, focused, cx| { … }) |
HoverChanged { hovered: bool } | .on_hover_changed(cx, |app, hovered, cx| { … }) |
EnabledChanged { enabled: bool } | .on_enabled_changed(cx, |app, enabled, cx| { … }) |
Use .on_event(cx, |app, event, cx| { … }) for all events. Factory-created controls support the same callbacks through SliderEventExt. Existing cx.subscribe observers remain supported.