How to make a slider fully controlled?

[bluenote10]

Following the tutorial on controlled input, I'm trying to make a slider that is fully controlled, but it doesn't quite work as expected. Consider the following example:

use dioxus::prelude::*;

#[component]
pub fn DebugSlider() -> Element {
    let mut value = use_signal(|| 0.0_f32);
    let mut only_positive = use_signal(|| false);

    rsx! {
        div {
            div { "value: {value}" }
            div { "only_positive: {only_positive}" }
            div {
                input {
                    r#type: "range",
                    value: "{value}",
                    min: "-1.0",
                    max: "1.0",
                    step: "0.01",
                    prevent_default: "oninput", // desparate attempt to disable the default behavior
                    oninput: move |event| {
                        let mut incoming_value = event.value().parse::<f32>().unwrap();
                        if only_positive() {
                            incoming_value = f32::max(0.0, incoming_value);
                        }
                        value.set(incoming_value);
                    }
                }
            }
            div {
                "Only positive"
                input {
                    r#type: "checkbox",
                    value: "{only_positive}",
                    oninput: move |event| {
                        only_positive.set(event.value().parse::<bool>().unwrap());
                    }
                }
            }
        }
    }
}

The behavior I get is (I'm using a desktop app / webview in this case):

Peek.2024-04-12.21-32.mp4

I.e., when I enable the "clamp to positive numbers only", the value itself is actually clamped, but the slider visually shows something that deviates from what the value really is.

Any ideas why this is not working, and what could be done to make the view consistent with the underlying value?

[ealmloff]

It looks like you are running into a bug with volatile attributes that was fixed in #2278. You can try switching to the git version of dioxus to fix the issue

[bluenote10]

Yes that should fix it, thanks! Just wasn't sure if this is intended behavior.