Input type range value bug

[TatriX]

input![
            attrs![
                At::Value => "400",
                At::Type => "range",
                At::Min => "100",
                At::Max => "800",
                At::Step => "50",
            ]
        ]

Rendered:

while it should look like this:

To get a proper behavior value need to be placed after step:

input![
            attrs![
                At::Type => "range",
                At::Min => "100",
                At::Max => "800",
                At::Step => "50",
                At::Value => "400",
            ]
        ] 

while it should work independent of attributes order.

[MartinKavik]

Have you tested it with master or only Seed 0.5.1?

[MartinKavik]

You can try to play a little bit with this line:

seed/src/browser/dom/virtual_dom_bridge.rs

Line 252 in 5d94d96

AtValue::Some(new_val) => crate::util::set_value(old_el_ws, new_val),

Maybe Seed tries to set a value through direct call, before the other attributes are patched. And it causes some wierd side-effects. Just my first guess.

Or could you post a minimal example?

[TatriX]

Both master & 0.5.1.
Based on examples/counter:

//! A simple, cliché example demonstrating structure and syntax.
//! Inspired by [Elm example](https://guide.elm-lang.org/architecture/buttons.html).

// Some Clippy linter rules are ignored for the sake of simplicity.
#![allow(clippy::needless_pass_by_value, clippy::trivially_copy_pass_by_ref)]

use seed::{prelude::*, *};

// ------ ------
//     Model
// ------ ------

type Model = i32;

// ------ ------
//    Update
// ------ ------

enum Msg {
    Increment,
    Decrement,
}

fn update(msg: Msg, model: &mut Model, _: &mut impl Orders<Msg>) {
    match msg {
        Msg::Increment => *model += 1,
        Msg::Decrement => *model -= 1,
    }
}

// ------ ------
//     View
// ------ ------

fn view(model: &Model) -> Node<Msg> {
    div![
        button![ev(Ev::Click, |_| Msg::Decrement), "-"],
        div![model.to_string()],
        button![ev(Ev::Click, |_| Msg::Increment), "+"],
        hr![],
        input![
            attrs![
                At::Value => "400",
                At::Type => "range",
                At::Min => "100",
                At::Max => "800",
                At::Step => "50",
            ]
        ]
    ]
}

// ------ ------
//     Start
// ------ ------

#[wasm_bindgen(start)]
pub fn render() {
    App::builder(update, view).build_and_start();
}

[MartinKavik]

Value has to be set after Min & Max => setting attributes are order-sensitive and DOM API is horrible as usual so I can't find something like Element::set_attributes or create_element_with_attributes.
Another alternative is to create the element from string - there are more options - https://stackoverflow.com/questions/494143/creating-a-new-dom-element-from-an-html-string-using-built-in-dom-methods-or-pro.
So we'll need to change this code https://github.com/seed-rs/seed/blob/master/src/browser/dom/virtual_dom_bridge.rs#L101-L131 and maybe https://github.com/seed-rs/seed/blob/master/src/browser/dom/virtual_dom_bridge.rs#L229-L292 (if we need it also for patching).

@TatriX Could you try to fix it once you have time?

[TatriX]

I'll be off for 2 weeks starting tomorrow. Will look afterwards if it steel be open.