<input type range> in ui-template issues

Dashboard
1

I tried putting an tag type "range" in a ui-template.
When I slide the thumb it does not scroll smoothly. it moves a bit and stops, and when I release the mouse it jumps to that position.
I tried a simple inside a ui-template in chrome, firefox, and edge. I get the same results.

[{"id":"c9a7460f.874bb8","type":"ui_template","z":"3fd04f45.2b77f","group":"2ff1e65c.0c222a","name":"","order":0,"width":0,"height":0,"format":"<input type=\"range\">","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":520,"y":340,"wires":[[]]},{"id":"2ff1e65c.0c222a","type":"ui_group","z":"","name":"Lights","tab":"d49156ff.456dc8","order":1,"disp":true,"width":"6","collapse":false},{"id":"d49156ff.456dc8","type":"ui_tab","z":"","name":"Study","icon":"dashboard","order":8,"disabled":false,"hidden":false}]
2

Seems to work fine for me with NR running on my mac and the browsers also local.

  • What device and OS are you running NR on?
  • what versions of NR, node.js and the dashboard? (see the NR startup log)
  • what else is running on the device?
  • how much cpu is being used?
  • is this the only thing you have on your dashboard?
3

Thank you for the reply.

Node-RED version: v1.0.3
Node.js version: v12.16.0
Windows_NT 10.0.18362 x64 LE
Dashboard version 2.19.4 started at /ui

I also have node-red on raspberry pi 4 running buster, and when I access it from my PC I get the same. Tried it on all browsers, same behavior.
CPU is lightly used, and I have other nodes on my dashboard but they work fine.
I have the code in an HTML page and it works fine on the same PC while node-red is running fine. I tried it on the raspberry pi browser and get the same behavior

Note: if I use the arrow keys, it scrolls fine, and when I use my touch it scrolls fine, seem to be a problem with the mouse interaction.
ALSO, If I set the orient to vertical it works fine.

SO my observations is that it has to do with mouse scrolling in the horizontal orientation.

I am not sure I can include a small video in this forum

4

Does it happen on all browsers?

5

yes. I will try to take a short video and convert it to gif to include in my reply

6

Interesting, it works fine for me on a Mac in Safari, but I see what you are saying when I look at it in FireFox or Chrome

But I have no idea what might be causing it :frowning:

7

Thank you.
What puzzled me is what, in node-red md-card, is affecting the horizontal mouse scrolling!!!!

I tried to use the md-slider, but I have not figured out how to include it in a ui_template and how to customize the thumb, track, and color for each slider.