Vertical Slider

Is it possible to place slider vertically? I need it to manage position of my window shutter.

Not the most intuitive way to set it, but yes.

1 Like

ThanX a lot! That is exactly what I need.

hmm - there was me thinking a tall thin shape would be an obvious thing to try... ah well..
Will add some extra words to the info.

I mean it is, but most people are so conditioned to crap like toggles and checkboxes that they don't experiment. Perhaps I should restate it as "too intuitive to feel true."

1 Like

Should just work if height > width

I came from openhab2. In their ui there is a checkbox for vertical slider. So you are right, it's too intuitive to try :slight_smile:

And also checkbox for reverse (if you want to have 100 on top and 0 on bottom). Any ideas is it possible to reverse?

I had same dilemma in my mind for that Level widget I do currently. Checkbox vs height <> width. Hopefully it will be sorted out here? :thinking:

Both ways are good if it's described in doc.
It will be obvious in case of click and drag inside UI for size change of the widget :slight_smile:

[{"id":"810908dd.170e68","type":"ui_slider","z":"121977d4.01633","name":"","label":"slider","group":"ab06e35b.bb1a4","order":0,"width":"1","height":"5","passthru":true,"topic":"","min":"0","max":"100","step":1,"x":530,"y":360,"wires":[["bd7add2c.6a4ea8"]]},{"id":"4faf9efa.76f8e","type":"debug","z":"121977d4.01633","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":890,"y":360,"wires":[]},{"id":"bd7add2c.6a4ea8","type":"function","z":"121977d4.01633","name":"slider inverter","func":"var input = msg.payload;\nmsg.payload = 100-input;\nreturn msg;","outputs":1,"noerr":0,"x":700,"y":360,"wires":[["4faf9efa.76f8e"]]},{"id":"ab06e35b.bb1a4","type":"ui_group","z":"","name":"Default","tab":"6da9dc66.596744","disp":true,"width":"6","collapse":false},{"id":"6da9dc66.596744","type":"ui_tab","name":"Tab 1","icon":"dashboard","order":1}]

Updated version in master branch (github not npm)
npm i node-red/node-red-dashboard
With more text in info and ability to be automatically reversed by setting min > max.


For those interested, I made an alternative vertical slider with a console fader look.


Hi again!
I added a neat flow to automate the vertical console faders position and specify the fading time, might be useful for dashboards controlling volume or lighting intensity for example.

1 Like