Component Slider

Slider

A continuous (or stepped) value control.

Notes:

• Clicking anywhere on the control adjusts the value.
• Dragging anywhere on the control updates continuously.

Example

use gpui::ElementId;
use yororen_ui::component::slider;

let view = slider()
    .key(ElementId::from(("settings", "volume")))
    .range(0.0, 100.0)
    .step(1.0)
    .value(50.0)
    .on_change(|value, _window, _cx| {
        // value: f32
    });

When to use

• Volume/opacity/percentage controls
• Continuous values where quick adjustment is more important than exact typing

API

• slider(): constructor
• id(...) / key(...): stable identity
• range(min, max)
• step(f32): optional snapping step
• value(f32): initial/controlled value
• disabled(bool)
• on_change(|value, window, cx| ...)
• Styling: height/bg/fill/border/focus_border

Notes

• When on_change is omitted, Slider owns internal value state.

Defaults

• Range: 0.0..=1.0
• Height: 36px
• Track height: 6px (internal)

Tips

• Provide a stable key(...) in repeated rows to avoid state bleed.
• Use step(...) when you want snapping (e.g. whole-number percentages).