Just for fun. Nothing too fancy but may come useful for some edge cases 
Slide the ribbon to left or right to decrease or increase the desired change amount.
Sends payload on release.
[{"id":"13cbb8f5ac3261ed","type":"ui_template","z":"948c19fd.656978","group":"55888982bdd0637f","name":"ribbon controller","order":4,"width":0,"height":0,"format":"<style>\n .wheel {\n overflow: hidden;\n display: flex;\n justify-content: center;\n align-items: center;\n }\n \n .wrapper{\n display:flex;\n position:relative;\n overflow:hidden;\n background:white;\n width:100%;\n height:20px;\n \n\n }\n .wrapper:before {\n background: linear-gradient(270deg, #000000b0, transparent 20%);\n }\n \n .wrapper:after {\n background: linear-gradient(90deg, #000000b0, transparent 20%);\n }\n .ribbon{\n width:200%;\n position:absolute;\n height: 20px; \n left:-50%;\n background: linear-gradient(to right,\n #00000050,\n #00000050 50%,\n transparent 50%,\n transparent),linear-gradient(to right,var(--nr-dashboard-widgetBgndColor), transparent, var(--nr-dashboard-widgetBgndColor)) ;\n background-size: 0.6% 100%, 100% 100%;\n cursor:grab;\n \n }\n .needle{\n position: absolute;\n width: 4px;\n height: 20px;\n left: calc(50% - 2px);\n background: linear-gradient(to right, gray,#d30000,gray);\n }\n #currentRibbonValue{\n user-select:none;\n }\n</style>\n<div id=\"currentRibbonValue\">0</div>\n<div class=\"wrapper\" ng-mousedown=\"start($event)\" ng-mousemove=\"drag($event)\" ng-mouseup=\"release($event)\" >\n <div id=\"ribbon\" class=\"ribbon\" >\n <div class=\"needle\"></div>\n </div>\n</div>\n\n<script>\n (function(scope) {\n let dragging = false\n let position = 0;\n let sendValue = 0\n addEventListener('mouseup', (event) => {\n if(!dragging){\n return\n }\n scope.release(null)\n });\n\n scope.start = function(event) {\n let r = $(\"#ribbon\")[0] \n r.style.left = \"-50%\";\n r.style.cursor = \"grabbing\" \n position = event.originalEvent.x\n dragging = true \n }\n scope.drag = function(event) {\n if(!dragging){\n return\n }\n let r = $(\"#ribbon\")[0]\n let amount = (-50 + ((position - event.originalEvent.x)*-1)/2)\n if(amount > 0){\n amount = 0\n }\n if(amount < -100){\n amount = -100\n }\n sendValue = amount + 50\n let displayValue = sendValue > 0 ? \"+\"+sendValue : sendValue\n $(\"#currentRibbonValue\").text(displayValue)\n r.style.left = amount +'%'\n }\n scope.release = function(event) {\n let r = $(\"#ribbon\")[0] \n r.style.left = \"-50%\";\n r.style.cursor = \"grab\"\n dragging = false; \n scope.send({payload:sendValue})\n sendValue = 0\n $(\"#currentRibbonValue\").text(sendValue)\n }\n})(scope);\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"wheel","x":580,"y":580,"wires":[["cc2d313f98c86422"]]},{"id":"0a1672e9bb6e7140","type":"ui_text","z":"948c19fd.656978","group":"55888982bdd0637f","order":3,"width":0,"height":0,"name":"","label":"amount","format":"{{msg.payload}}","layout":"row-spread","className":"","x":960,"y":580,"wires":[]},{"id":"cc2d313f98c86422","type":"function","z":"948c19fd.656978","name":"controlled amount","func":"let controlledAmount = flow.get('controlledAmount') || 0\ncontrolledAmount += msg.payload\nflow.set('controlledAmount',controlledAmount)\nmsg.payload = controlledAmount\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":770,"y":580,"wires":[["0a1672e9bb6e7140"]]},{"id":"55888982bdd0637f","type":"ui_group","name":"1. group","tab":"62083694d0eab7ca","order":1,"disp":true,"width":"6","collapse":false,"className":""},{"id":"62083694d0eab7ca","type":"ui_tab","name":"Home","icon":"dashboard","order":1,"disabled":false,"hidden":false}]
