Slider

An input where the user selects a value from a given range.

When to use

• Adjusting a value within a range (volume, brightness, zoom).
• Choosing a percentage or ratio.

API

Slider::new(value)

Creates a slider with a value between 0.0 and 1.0 (clamped).

Method	Type	Default	Description
.id(id)	impl Into<SharedString>	"slider"	Custom element id
.focus_handle(&handle)	&FocusHandle	—	Focus handle (enables arrow-key adjustment)
.on_change(fn)	Fn(f32, &mut Window, &mut App)	—	Value-change handler

Usage

use gpui::{Component, div, prelude::*};
use components::Slider;

div().child(Component::new(
    Slider::new(this.slider_val)
        .on_change(cx.listener(|this, val, _, cx| {
            this.slider_val = val;
            cx.notify();
        })),
))

Copy the source

crates/components/src/slider.rs — self-contained, stateless, and free to modify.