Dashboard number input with +/- Buttons for changes

For entering data I need a simple field showing the value from msg.payload and beside the value little buttons "+" "-" to increment or decrement the value on the output. I hope I did not oversaw a solution here or a link to a dashboard extension.

The ui-numeric node has up and down arrows. Is that OK ?
Otherwise the ui-text node in number mode will render however your browser renders numeric type inputs

Hi,

it is perfectly fine to use ui-numeric like dceejay sugested.
If you want +/- buttons to be consistent with other dashboard buttons, you can try this:

[{"id":"9312030cbc08cb02","type":"tab","label":"Flow 1","disabled":false,"info":"","env":[]},{"id":"099fad1b20feea8a","type":"ui_button","z":"9312030cbc08cb02","name":"increment","group":"7398a6b80bbb57c0","order":1,"width":1,"height":1,"passthru":false,"label":"","tooltip":"","color":"","bgcolor":"","className":"","icon":"fa-plus fa-2x","payload":"1","payloadType":"num","topic":"topic","topicType":"msg","x":210,"y":220,"wires":[["293d3725a5283041"]]},{"id":"5932ad2ad184128c","type":"ui_button","z":"9312030cbc08cb02","name":"decrement","group":"7398a6b80bbb57c0","order":2,"width":1,"height":1,"passthru":false,"label":"","tooltip":"","color":"","bgcolor":"","className":"","icon":"fa-minus fa-2x","payload":"-1","payloadType":"num","topic":"topic","topicType":"msg","x":210,"y":260,"wires":[["293d3725a5283041"]]},{"id":"293d3725a5283041","type":"function","z":"9312030cbc08cb02","name":"","func":"var result = flow.get(\"result\")||0;\nmsg.payload = result + msg.payload;\nflow.set(\"result\", msg.payload);\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":400,"y":240,"wires":[["5c78a19f8edc1df8"]]},{"id":"5c78a19f8edc1df8","type":"ui_text","z":"9312030cbc08cb02","group":"7398a6b80bbb57c0","order":3,"width":4,"height":1,"name":"","label":"result","format":"{{msg.payload}}","layout":"row-spread","className":"","x":550,"y":240,"wires":[]},{"id":"7398a6b80bbb57c0","type":"ui_group","name":"Tab1","tab":"81896b925ac877f3","order":1,"disp":false,"width":"6","collapse":false,"className":""},{"id":"81896b925ac877f3","type":"ui_tab","name":"Home","icon":"","order":1,"disabled":false,"hidden":false}]

It is nothing more than two buttons with icons and one function block with one context variable.

Thanks dceejay, I really did not recognize these numeric node options. A simple and good first solution.
And also good Napest, perhaps for my later tuning.

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.