If any one is interested the focus and drag are now OK.
TODO: track fill between thumbs.
No clue how to do this yet. Any ideas anyone ?
[{"id":"7c5839a9.079138","type":"tab","label":"Flow 1","disabled":false,"info":""},{"id":"c607e4d7.140038","type":"inject","z":"7c5839a9.079138","name":"v1<v2","props":[{"p":"payload.v1","v":"42","vt":"num"},{"p":"payload.v2","v":"64","vt":"num"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","x":110,"y":60,"wires":[["c5037481.032a38"]]},{"id":"432fe7a.d03fc18","type":"ui_button","z":"7c5839a9.079138","name":"","group":"b290cc21.d734d","order":1,"width":8,"height":1,"passthru":false,"label":"button","tooltip":"","color":"","bgcolor":"","icon":"","payload":"","payloadType":"str","topic":"","x":110,"y":140,"wires":[[]]},{"id":"2be0b2eb.3e465e","type":"ui_button","z":"7c5839a9.079138","name":"","group":"b290cc21.d734d","order":5,"width":8,"height":1,"passthru":false,"label":"button","tooltip":"","color":"","bgcolor":"","icon":"","payload":"","payloadType":"str","topic":"","x":110,"y":160,"wires":[[]]},{"id":"98eca2a1.4a92e","type":"ui_button","z":"7c5839a9.079138","name":"","group":"b290cc21.d734d","order":2,"width":1,"height":1,"passthru":false,"label":"button","tooltip":"","color":"","bgcolor":"","icon":"","payload":"","payloadType":"str","topic":"","x":110,"y":180,"wires":[[]]},{"id":"4ba74281.6af97c","type":"ui_button","z":"7c5839a9.079138","name":"","group":"b290cc21.d734d","order":4,"width":1,"height":1,"passthru":false,"label":"button","tooltip":"","color":"","bgcolor":"","icon":"","payload":"","payloadType":"str","topic":"","x":110,"y":200,"wires":[[]]},{"id":"cd0eb001.83b3c","type":"inject","z":"7c5839a9.079138","name":"v1>v2","props":[{"p":"payload.v1","v":"64","vt":"num"},{"p":"payload.v2","v":"42","vt":"num"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","x":110,"y":20,"wires":[["c5037481.032a38"]]},{"id":"a667db55.81d048","type":"debug","z":"7c5839a9.079138","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":110,"y":240,"wires":[]},{"id":"c5037481.032a38","type":"ui_template","z":"7c5839a9.079138","group":"b290cc21.d734d","name":"","order":3,"width":6,"height":1,"format":"<!--\n TODO: Track fill between v1 and v2 markers. \n-->\n<div class=\"slider-wrapper-v1;\" \n style=\"width:100%;max-width:100%;overflow: hidden !important;\">\n <md-slider thumbLabel md-sign md-thumb-text \n style=\"max-width:100%; width:100%; \n top:-2px; height: 50px;\"\n md-discrete=\"\"\n md-disabled-thumb=\"true\"\n aria-label = \"msg.payload.v1\" \n aria-labelledby=\"slider-always\"\n ng-model=\"msg.payload.v1\" \n ng-change=\"send(msg)\" \n flex=\"20\" min=\"0\" max=\"255\" \n class=\"slider-v1\">\n <div class=\"md-slider-wrapper1\">\n <div class=\"md-track-container\">\n <div class=\"md-track\"></div>\n <div class=\"md-track md-track-fill\" style=\"width: 55%;\"></div>\n <div class=\"md-track-ticks\"><canvas style=\"position:absolute;\" width=\"151\" height=\"5\"></canvas></div>\n </div>\n <div class=\"md-thumb-container\" style=\"left: 55%;\">\n <div class=\"md-pointer\"></div>\n <div class=\"md-thumb\"></div>\n <div class=\"md-focus-thumb\"></div>\n <div class=\"md-focus-ring\"></div>\n <div class=\"md-sign\"><span class=\"md-thumb-text\"></span></div>\n <div class=\"md-disabled-thumb\"></div>\n </div>\n </div> \n </md-slider>\n</div>\n<div class=\"slider-wrapper-v2;\" \n style=\"width:100%;max-width:100%;overflow: hidden;\">\n <md-slider thumbLabel md-sign md-thumb-text \n style=\"max-width:100%; width:100%; \n top:-2px; height: 50px;\"\n md-discrete=\"\"\n aria-label = \"msg.payload.v2\" \n ng-model=\"msg.payload.v2\" \n ng-change=\"send(msg)\" \n flex=\"20\" min=\"0\" max=\"255\" \n class=\"slider-v2\">\n <div class=\"md-slider-wrapper2\">\n <div class=\"md-track-container\">\n <div class=\"md-track\"></div>\n <div class=\"md-track md-track-fill\" style=\"width: 55%;\"></div>\n <div class=\"md-track-ticks\"><canvas style=\"position:absolute;\" width=\"151\" height=\"5\"></canvas> </div>\n </div>\n <div class=\"md-thumb-container\" style=\"left: 55%;\">\n <div class=\"md-thumb\"></div>\n <div class=\"md-focus-thumb\"></div>\n <div class=\"md-focus-ring\"></div>\n <div class=\"md-sign\"><span class=\"md-thumb-text\"></span></div>\n <div class=\"md-disabled-thumb\"></div>\n </div>\n </div> \n </md-slider>\n</div>\n\n<script>\n(function(scope) {\n scope.$watch(\"msg.payload\", function (v) {\n if (!v) scope.msg ={ payload: {v1:0, v2:0} };\n });\n})(scope);\n</script>\n<!--\n -->\n<style>\n .slider-v1 .md-focus-ring, \n .slider-v2 .md-focus-ring {\n position: relative;\n top:24px;\n left:0px;\n height:20px;\n width:20px;\n opacity:1;\n z-index:9999;\n background-color: var(--nr-dashboard-widgetColor);\n }\n .md-thumb {\n width:0;\n height:0;\n opacity:0;\n }\n .md-sign {\n background-color: var(--nr-dashboard-widgetBgndColor) !important;\n width: 28px;\n height: 28px;\n top: -17px;\n }\n md-slider[md-discrete]:not([disabled]):not(.slider-v2):focus .md-sign,\n md-slider[md-discrete]:not([disabled]):not(.slider-v2):focus .md-sign:after,\n md-slider[md-discrete]:not([disabled]):not(.slider-v2):hover .md-sign,\n md-slider[md-discrete]:not([disabled]):not(.slider-v2):hover .md-sign:after,\n md-slider[md-discrete]:not([disabled]):not(.slider-v2):active .md-sign,\n md-slider[md-discrete]:not([disabled]):not(.slider-v2):active .md-sign:after {\n opacity: 1;\n -webkit-transform: translate3d(10px, 23px, 0) scale(1);\n transform: translate3d(10px, 23px, 0) scale(1);\n }\n md-slider[md-discrete]:not([disabled]):not(.slider-v2):not(:hover) .md-sign,\n md-slider[md-discrete]:not([disabled]):not(.slider-v2):not(:hover) .md-sign:after,\n md-slider[md-discrete]:not(.slider-v2) .md-sign,\n md-slider[md-discrete]:not(.slider-v2) .md-sign:after {\n opacity: 1;\n -webkit-transform: translate3d(10px, 23px, 0) scale(1);\n transform: translate3d(10px, 23px, 0) scale(1);\n }\n md-slider[md-discrete]:not([disabled]):not(.slider-v1):focus .md-sign,\n md-slider[md-discrete]:not([disabled]):not(.slider-v1):focus .md-sign:after,\n md-slider[md-discrete]:not([disabled]):not(.slider-v1):hover .md-sign,\n md-slider[md-discrete]:not([disabled]):not(.slider-v1):hover .md-sign:after,\n md-slider[md-discrete]:not([disabled]):not(.slider-v1):active .md-sign,\n md-slider[md-discrete]:not([disabled]):not(.slider-v1):active .md-sign:after {\n -webkit-transform: translate3d(10px, 50px, 0) scale(1);\n transform: translate3d(10px, 50px, 0) scale(1);\n }\n md-slider[md-discrete]:not([disabled]):not(.slider-v1):not(:hover) .md-sign,\n md-slider[md-discrete]:not([disabled]):not(.slider-v1):not(:hover) .md-sign:after,\n md-slider[md-discrete]:not(.slider-v1) .md-sign,\n md-slider[md-discrete]:not(.slider-v1) .md-sign:after {\n opacity: 1;\n -webkit-transform: translate3d(10px, 50px, 0) scale(1);\n transform: translate3d(10px, 50px, 0) scale(1);\n }\n .md-focus-ring {\n width: 0px;\n height: 0px;\n }\n .md-thumb-text {\n color: var(--nr-dashboard-widgetTextColor) !important;\n }\n .slider-wrapper-v2 {\n height: 50%;\n }\n .slider-wrapper-v1{\n height: 50%;\n }\n .slider-wrapper-v1{\n position: absolute;\n top: 50px;\n }\n .slider-v1 .md-track-fill {\n background-color: var(--nr-dashboard-widgetColor) !important;\n }\n .slider-v2 .md-track-fill {\n background-color: var(--nr-dashboard-widgetColor) !important;\n }\n .slider-v1, .slider-v2 {\n margin: 0px;\n padding-left:10px;\n padding-right:10px;\n }\n .slider-v1 .md-track-content {\n top: 23px;\n }\n .slider-v2 .md-slider-content {\n top: -22px;\n }\n</style>\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":120,"y":100,"wires":[["a667db55.81d048"]]},{"id":"b290cc21.d734d","type":"ui_group","name":"Ranges","tab":"2a0bd1d7.7ca9ce","order":1,"disp":true,"width":"8","collapse":false},{"id":"2a0bd1d7.7ca9ce","type":"ui_tab","name":"range port 1883","icon":"dashboard","order":3,"disabled":false,"hidden":false}]
