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;

// Controlled (external value)
let view = slider("volume-slider")
    .range(0.0, 100.0)
    .step(1.0)
    .value(50.0)
    .on_change(|value, _window, _cx| {
        // value: f32
    });

// Uncontrolled (internal state with initial value)
let view = slider("volume-slider")
    .range(0.0, 100.0)
    .step(1.0)
    .default_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(id): constructor (requires element id)
• id(...) / key(...): stable identity
• range(min, max)
• step(f32): optional snapping step
• value(f32): controlled value (external state)
• default_value(f32): initial value (uncontrolled/internal state)
• disabled(bool)
• on_change(|value, window, cx| ...)
• Styling: height/bg/fill/border/focus_border

Notes

• Controlled mode: Use value() when you want external control of the value. The parent component manages the state.
• Uncontrolled mode: Use default_value() when you want internal state management. The slider manages its own state.
• If neither value nor default_value is provided, defaults to min.

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).