Multiple support.
[{"id":"772297c4.f05598","type":"ui_template","z":"a05ff4cd.1ae7e8","group":"19f5ed07.08a453","name":"3-way switch","order":12,"width":"6","height":"1","format":"<div id=\"{{'swc_'+$id}}\" class=\"switchwrapper\">\n <div class=\"toggle_radio\">\n \n <input type=\"radio\" class=\"toggle_option\" id=\"{{'first_'+$id}}\" name=\"toggle_option\" ng-click=\"send({payload: 'first'})\" ng-model=\"value\" value=\"first\">\n <input type=\"radio\" checked class=\"toggle_option\" id=\"{{'second_'+$id}}\" name=\"toggle_option\" ng-click=\"send({payload: 'second'})\" ng-model=\"value\" value=\"second\">\n <input type=\"radio\" class=\"toggle_option\" id=\"{{'third_'+$id}}\" name=\"toggle_option\" ng-click=\"send({payload: 'third'})\" ng-model=\"value\" value=\"third\">\n <div id=\"{{'slider_'+$id}}\" class=\"toggle_option_slider\"></div>\n <label for=\"{{'first_'+$id}}\"><p>First</p></label>\n <label for=\"{{'second_'+$id}}\"><p>Second</p></label>\n <label for=\"{{'third_'+$id}}\"><p>Third</p></label>\n </div>\n \n</div>\n\n<script>\n(function(scope) {\n // watch msg object from Node-RED\n scope.$watch('value', function(value) {\n switch(value){\n case 'first':{\n $(\"#slider_\"+scope.$id).css(\"left\", \"3px\")\n break\n }\n case 'second':{\n $(\"#slider_\"+scope.$id).css(\"left\", \"33%\")\n break\n }\n case 'third':{\n $(\"#slider_\"+scope.$id).css(\"left\", \"66%\")\n break\n }\n }\n \n });\n scope.$watch('msg', function(msg) {\n // Select one of the 3 radiobuttons, based on the msg.payload value\n if(msg){\n switch(msg.payload) {\n case \"first\":\n $(\"#first_\"+scope.$id).checked = true;\n break;\n case \"second\":\n $(\"#second_\"+scope.$id).checked = true;\n break;\n case \"third\":\n $(\"#third_\"+scope.$id).checked = true;\n break;\n } \n }\n \n });\n})(scope);\n</script>\n \n<style>\n.switchwrapper {\n margin: auto 0;\n}\n.toggle_radio{\n position: relative; \n margin: auto;\n overflow: hidden;\n border-radius: 50px;\n position: relative;\n height: 26px;\n border: 1px solid var(--nr-dashboard-groupBorderColor);\n background: var(--nr-dashboard-widgetBgndColor);\n}\n.toggle_radio > * {\n float: left;\n}\n.toggle_radio input[type=radio]{\n display: none;\n}\n.toggle_radio label{\n display: block;\n width: 33%;\n height: 20px;\n margin: 0;\n line-height :18px;\n border-radius: 50px;\n cursor: pointer;\n z-index: 1;\n text-align: center;\n}\n.toggle_radio label >p {\n background:transparent !important;\n}\n.toggle_option_slider{\n width: 33%;\n height: 20px;\n position: absolute;\n top: 3px;\n border-radius: 50px;\n transition: all .4s ease;\n z-index:0;\n left:3px;\n opacity:0.4;\n background: var(--nr-dashboard-widgetColor);\n}\n\n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":390,"y":920,"wires":[["79fb7910.3efa38"]]},{"id":"79fb7910.3efa38","type":"debug","z":"a05ff4cd.1ae7e8","name":"Selected option","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","statusVal":"","statusType":"auto","x":580,"y":940,"wires":[]},{"id":"a4764f08.36e08","type":"inject","z":"a05ff4cd.1ae7e8","name":"Select first","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"first","payloadType":"str","x":200,"y":900,"wires":[["772297c4.f05598"]]},{"id":"df57bcc3.02bc4","type":"inject","z":"a05ff4cd.1ae7e8","name":"Select second","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"second","payloadType":"str","x":190,"y":940,"wires":[["772297c4.f05598"]]},{"id":"80056f30.c386d","type":"inject","z":"a05ff4cd.1ae7e8","name":"Select third","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"third","payloadType":"str","x":190,"y":980,"wires":[["772297c4.f05598"]]},{"id":"afa57baa.600738","type":"ui_template","z":"a05ff4cd.1ae7e8","group":"19f5ed07.08a453","name":"3-way switch","order":12,"width":"6","height":"1","format":"<div id=\"{{'swc_'+$id}}\" class=\"switchwrapper\">\n <div class=\"toggle_radio\">\n \n <input type=\"radio\" class=\"toggle_option\" id=\"{{'first_'+$id}}\" name=\"toggle_option\" ng-click=\"send({payload: 'first'})\" ng-model=\"value\" value=\"first\">\n <input type=\"radio\" checked class=\"toggle_option\" id=\"{{'second_'+$id}}\" name=\"toggle_option\" ng-click=\"send({payload: 'second'})\" ng-model=\"value\" value=\"second\">\n <input type=\"radio\" class=\"toggle_option\" id=\"{{'third_'+$id}}\" name=\"toggle_option\" ng-click=\"send({payload: 'third'})\" ng-model=\"value\" value=\"third\">\n <div id=\"{{'slider_'+$id}}\" class=\"toggle_option_slider\"></div>\n <label for=\"{{'first_'+$id}}\"><p>First</p></label>\n <label for=\"{{'second_'+$id}}\"><p>Second</p></label>\n <label for=\"{{'third_'+$id}}\"><p>Third</p></label>\n </div>\n \n</div>\n\n<script>\n(function(scope) {\n // watch msg object from Node-RED\n scope.$watch('value', function(value) {\n switch(value){\n case 'first':{\n $(\"#slider_\"+scope.$id).css(\"left\", \"3px\")\n break\n }\n case 'second':{\n $(\"#slider_\"+scope.$id).css(\"left\", \"33%\")\n break\n }\n case 'third':{\n $(\"#slider_\"+scope.$id).css(\"left\", \"66%\")\n break\n }\n }\n \n });\n scope.$watch('msg', function(msg) {\n // Select one of the 3 radiobuttons, based on the msg.payload value\n if(msg){\n switch(msg.payload) {\n case \"first\":\n $(\"#first_\"+scope.$id).checked = true;\n break;\n case \"second\":\n $(\"#second_\"+scope.$id).checked = true;\n break;\n case \"third\":\n $(\"#third_\"+scope.$id).checked = true;\n break;\n } \n }\n \n });\n})(scope);\n</script>\n \n<style>\n.switchwrapper {\n margin: auto 0;\n}\n.toggle_radio{\n position: relative; \n margin: auto;\n overflow: hidden;\n border-radius: 50px;\n position: relative;\n height: 26px;\n border: 1px solid var(--nr-dashboard-groupBorderColor);\n background: var(--nr-dashboard-widgetBgndColor);\n}\n.toggle_radio > * {\n float: left;\n}\n.toggle_radio input[type=radio]{\n display: none;\n}\n.toggle_radio label{\n display: block;\n width: 33%;\n height: 20px;\n margin: 0;\n line-height :18px;\n border-radius: 50px;\n cursor: pointer;\n z-index: 1;\n text-align: center;\n}\n.toggle_radio label >p {\n background:transparent !important;\n}\n.toggle_option_slider{\n width: 33%;\n height: 20px;\n position: absolute;\n top: 3px;\n border-radius: 50px;\n transition: all .4s ease;\n z-index:0;\n left:3px;\n opacity:0.4;\n background: var(--nr-dashboard-widgetColor);\n}\n\n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":370,"y":1060,"wires":[["3670a92a.306666"]]},{"id":"3670a92a.306666","type":"debug","z":"a05ff4cd.1ae7e8","name":"Selected option","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","statusVal":"","statusType":"auto","x":560,"y":1080,"wires":[]},{"id":"5700ef9e.53e3","type":"inject","z":"a05ff4cd.1ae7e8","name":"Select first","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"first","payloadType":"str","x":180,"y":1040,"wires":[["afa57baa.600738"]]},{"id":"8a1e37d7.526558","type":"inject","z":"a05ff4cd.1ae7e8","name":"Select second","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"second","payloadType":"str","x":170,"y":1080,"wires":[["afa57baa.600738"]]},{"id":"1d487981.905646","type":"inject","z":"a05ff4cd.1ae7e8","name":"Select third","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"third","payloadType":"str","x":170,"y":1120,"wires":[["afa57baa.600738"]]},{"id":"19f5ed07.08a453","type":"ui_group","name":"Default","tab":"c71e2691.3704f8","order":1,"disp":true,"width":"6","collapse":false},{"id":"c71e2691.3704f8","type":"ui_tab","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]
