Function SliderImpl

primitives/src/slider.rs:304–443

(props: SliderImplProps)

#[component]
fn SliderImpl(props: SliderImplProps) -> Element {
    let orientation = if props.horizontal {
        "horizontal"
    } else {
        "vertical"
    };

    let mut dragging = use_signal(|| false);
    // Index of the thumb currently being interacted with via pointer. Only meaningful while
    // `dragging` is true; reads outside a drag may return a stale value from the prior interaction.
    let active_thumb = use_signal(|| 0usize);

    let ctx = use_context_provider(|| SliderContext {
        thumbs: props.thumbs,
        set_thumb: props.set_thumb,
        min: props.min,
        max: props.max,
        step: props.step,
        disabled: props.disabled,
        horizontal: props.horizontal,
        inverted: props.inverted,
        dragging: dragging.into(),
        active_thumb,
        label: props.label,
    });

    let mut movement = use_move_interaction(dragging);
    let mut granular_thumbs = use_hook(move || CopyValue::new(props.thumbs.peek().clone()));

    let size = movement.rect().map(|r| {
        if props.horizontal {
            r.width()
        } else {
            r.height()
        }
    });

    use_effect(move || {
        if !dragging() {
            return;
        }

        let Some(size) = size else {
            return;
        };

        let Some(move_event) = movement.pointer_move() else {
            return;
        };

        let delta_pos = if ctx.horizontal {
            move_event.delta_x
        } else {
            move_event.delta_y
        };

        let value_delta = delta_pos / size * ctx.range_size();