I want to display the current and the target temperature of my heating including modifying only the target temp in a compact slider. I adapted this code from @ozpos
... and the result is almost perfect for me (I still have to adapt min and max values):
This is my code:
[{"id":"603b76a2.88b2b8","type":"inject","z":"c92aaaab.75c1e","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":150,"y":160,"wires":[["c7dcf6e8.b3211"]]},{"id":"6e7da593.5bb87c","type":"inject","z":"c92aaaab.75c1e","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":150,"y":120,"wires":[["c7dcf6e8.b3211"]]},{"id":"ff80e54b.072a28","type":"debug","z":"c92aaaab.75c1e","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":750,"y":140,"wires":[]},{"id":"c7dcf6e8.b3211","type":"ui_template","z":"c92aaaab.75c1e","group":"5198bf22.70c5d","name":"Slider Template","order":3,"width":6,"height":1,"format":"\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 ng-disabled = \"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 position: relative;\n top:24px;\n left:0px;\n height:20px;\n width:20px;\n opacity:1;\n z-index:9999;\n background-color: red;\n }\n \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 \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-slider .md-thumb {\n width:0;\n height:0;\n opacity:0;\n \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":480,"y":140,"wires":[["ff80e54b.072a28"]]},{"id":"e16a2dd7.1410c8","type":"ui_slider","z":"c92aaaab.75c1e","name":"","label":"slider","tooltip":"","group":"5198bf22.70c5d","order":15,"width":0,"height":0,"passthru":true,"outs":"all","topic":"","min":0,"max":10,"step":1,"x":360,"y":260,"wires":[[]]},{"id":"8283ac13.eb9f88","type":"ui_switch","z":"c92aaaab.75c1e","name":"","label":"switch","tooltip":"","group":"5198bf22.70c5d","order":14,"width":0,"height":0,"passthru":true,"decouple":"false","topic":"","style":"","onvalue":"true","onvalueType":"bool","onicon":"","oncolor":"","offvalue":"false","offvalueType":"bool","officon":"","offcolor":"","x":520,"y":260,"wires":[[]]},{"id":"5198bf22.70c5d","type":"ui_group","name":"Standard","tab":"f9b58883.fa613","order":1,"disp":true,"width":"6","collapse":false},{"id":"f9b58883.fa613","type":"ui_tab","name":"Home","icon":"dashboard","order":1,"disabled":false,"hidden":false}]
You can see a white dot next to the number 67, which touches the number slightly. If I remove the following css:
md-slider .md-thumb {
width:0;
height:0;
opacity:0;
the dot is grey now instead, so one can see the problem better:
If I set the ng-disabled to false, the first slider looks good and there is no dot anymore:
But now I can change the first (red) slider, which only displays the current temperature and should not be changeable.
I already contacted @ozpos and he replied:
If you open dev tools in the browser and click inspect element and hover over the circle it shows as md-disabled-thumb. Just to the left and up a bit is the grey dot and this shows up as md-thumb:after.
I can set left: 200px !important; in the browser and it disappears but it does not work from within the style sheet.
So we both are not able to remove the dot by any code change.
