`id` and `name` have different behaviours with the range slider when used in a form

[ElijahAhianyo]

import reflex as rx

class FormState(rx.State):
    form_data: dict = {}
    slider_values: list[float] = [20, 80]

    def handle_submit(self, form_data: dict):
        """Handle the form submit."""
        self.form_data = form_data

app = rx.App()

@rx.page()
def index():
    return rx.vstack(
        rx.form(
            rx.vstack(
                rx.slider(
                    default_value=FormState.slider_values,
                    min=0,
                    max=100,
                    step=1,
                    name="slider-1"
                ),
                rx.slider(
                    default_value=FormState.slider_values,
                    min=0,
                    max=100,
                    step=1,
                    id="slider-2"
                ),
                rx.button("Submit", type="submit"),

            ),
            on_submit=FormState.handle_submit,
            reset_on_submit=True,
        ),
        rx.divider(),
        rx.heading("Results"),
        rx.text(FormState.form_data.to_string()),
    )

Looking at the screenshot, using name reports the end value while id reports the start value on submission. The

Also looking at the case with name, the resulting name value in the form data differs from that specified on the component(slider-1 instead of slider-1[]

[linear[bot]]

ENG-3981 `id` and `name` have different behaviours with the range slider

[ramizik]

Hi Elijah, I'd like to look into this issue. This will be my first contribution, and I'm excited to work on it. It might take me some time to fix, but I'll report my findings as soon as I make progress. Thank you!

[picklelo]

@ramizik let us know if you have any issues - we can also help on Discord