Web server (version: 2) showing wrong state/min/max on slider when sensors are on other than alphabetical order on YAML

[savikko]

The problem

I have three Template Number sensors, which have this kind of config:

  - platform: template
    name: "Sensor name"
    id: sensor_1
    optimistic: true
    restore_value: yes
    initial_value: 108
    min_value: 72
    max_value: 120
    step: 1
    mode: slider

On webserver version: 2 it shows sliders and I can control those but position of slider is off:

Seems, that if min_value is something more than 0 or 1, it cannot determine right position for slider "handle".

Still, setting value via slider works.

Which version of ESPHome has the issue?

2022.4.0b2

What type of installation are you using?

pip

Which version of Home Assistant has the issue?

No response

What platform are you using?

ESP32

Board

No response

Component causing the issue

No response

Example YAML snippet

No response

Anything in the logs that might be useful for us?

No response

Additional information

No response

[jesserockz]

I am unable to reproduce this. I copied your template number yaml and the slider works as expected. When loading the page it starts in the correct position.

[savikko]

Thanks for taking time to investigate this.

I played with this a little bit more.

I originally used Edge (chromium based) and now tested Chrome and Firefox. Same happens on both. From Devtools I see that input has correct value:

Slider is still off. If I manually change the value (to html), slider goes to right position.

But then, if I am on the page and I change the value from Home Assistant, then ESPHome UI updates correctly.

So it kinda seems that this is only related to first load of the page. Not sure yet how to debug this more.

[savikko]

Little bit extra info: When I first load this page, slider is on the left (at incorrect position). Then, when I change the value from outside (on this case Home Assistant), slider moves to correct position. Then it moves correctly but if I then move slider within ESPHome Webserver UI, it changes the value correctly but after this changes from Home Assistant does not reflect to slider position. Value (column State) changes correctly.

[savikko]

I think this is somehow related to alphabetical ordering on Webserver UI.

You should be able to reproduce this issue with this kind of entities:

number:
  - platform: template
    name: "Third number"
    id: number_3
    optimistic: true
    min_value: 72
    max_value: 120
    initial_value: 90
    step: 0.1
    mode: slider
  - platform: template
    name: "Second number"
    id: number_2
    optimistic: true
    min_value: 1
    max_value: 15
    initial_value: 5
    step: 0.1
    mode: slider
  - platform: template
    name: "First number"
    id: number_1
    optimistic: true
    initial_value: 80
    min_value: 72
    max_value: 120
    step: 1
    mode: slider

That should result this:

Then, if you change name "First number" to "XFirst number", we get this:

So now the "XFirst number" is ok but "Second number" is still totally off.

Then, if we change names to:

• A Third number
• B Second number
• C First number

it works:

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[ssieb]

I can't reproduce this either with the current version.