You may try if custom made slider works. It is still based on <md-slider> but who knows what is the root cause of failure.
[{"id":"bdc44b29.79d388","type":"ui_template","z":"9f4fbba4.68ceb8","group":"20ae1040.3cf58","name":"color slider based on md-slider","order":1,"width":"6","height":"1","format":"<div class=\"slider-rgb\" id=\"{{'value_'+$id}}\"></div>\n<div id=\"{{'slider_'+$id}}\" class=\"color-sider-container\">\n <md-slider ng-model=\"slidervalue\" step=\"0.01\" min=\"0\" max=\"1\" aria-label=\"color slider\"></md-slider>\n</div>\n<style>\n.slider-rgb{\n position: absolute;\n font-size: 12px;\n left: 30px;\n line-height: 6px;\n}\n.color-sider-container{\n\n}\n.color-sider-container > md-slider{\n height:40px;\n margin-left: 10px;\n margin-right: 12px;\n top:-1px;\n}\n.color-sider-container > md-slider .md-track-container {\n width: 100%;\n position: absolute;\n top: 16px;\n height: 16px;\n \n}\n.color-sider-container > md-slider .md-track.md-track{\n border-radius:10px;\n background: linear-gradient(\n to right,\n rgb(255 0 0),\n rgb(255 255 0),\n rgb(0 255 0),\n rgb(0 255 255),\n rgb(0 0 255),\n rgb(255 0 255),\n rgb(255 0 0)\n );\n}\n.color-sider-container > md-slider .md-track.md-track-fill{\n visibility:hidden;\n}\n.color-sider-container > md-slider .md-thumb:after {\n visibility:hidden;\n \n}\n.color-sider-container > md-slider .md-thumb {\n transform: scale(1.2) !important;\n border:2px solid white;\n pointer-events: none;\n\n}\n</style>\n\n<script>\n(function(scope) {\nconst spectrumRanges = [\n { from: [255, 0, 0], to: [255, 255, 0] },\n { from: [255, 255, 0], to: [0, 255, 0] },\n { from: [0, 255, 0], to: [0, 255, 255] },\n { from: [0, 255, 255], to: [0, 0, 255] },\n { from: [0, 0, 255], to: [255, 0, 255] },\n { from: [255, 0, 255], to: [255, 0, 0] }\n];\n\nconst findColorValue = (from, to, leftRatio) => {\n return Math.round(from + (to - from) * leftRatio);\n};\n\nconst findRgbFromSliderValue = (sliderpos) => {\n sliderpos = validateInput(sliderpos)\n const wrapper = document.querySelector(\".color-sider-container\");\n const {width } = wrapper.getBoundingClientRect();\n const leftDistance = width * sliderpos\n const totalRanges = spectrumRanges.length;\n const rangeWidth = width / totalRanges;\n const includedRange = Math.floor(leftDistance / rangeWidth);\n const leftRatio = ((leftDistance % rangeWidth) / rangeWidth).toFixed(2);\n const { from, to } = spectrumRanges[includedRange];\n return {\n r: findColorValue(from[0], to[0], leftRatio),\n g: findColorValue(from[1], to[1], leftRatio),\n b: findColorValue(from[2], to[2], leftRatio)\n };\n};\n\nconst rgbToHex = (r, g, b) => {\n const toHex = (rgb) => {\n let hex = Number(rgb).toString(16);\n if (hex.length < 2) {\n hex = `0${hex}`;\n }\n return hex;\n };\n const red = toHex(r);\n const green = toHex(g);\n const blue = toHex(b);\n return `#${red}${green}${blue}`;\n};\n \nconst validateInput = (inp) => {\n if(isNaN(inp)){\n return 0.00001\n }\n if(inp <= 0 ) {\n return 0.00001\n }\n if(inp >=1){\n return 0.9999\n }\n return inp\n} \nscope.$watch('slidervalue', function(slidervalue) {\n if (slidervalue !== undefined) {\n let { r, g, b } = findRgbFromSliderValue(slidervalue);\n let hexValue = rgbToHex(r, g, b);\n $(\"#slider_\"+scope.$id).find('.md-thumb').css(\"background-color\",hexValue);\n $(\"#value_\"+scope.$id).text('RGB:('+r+','+g+','+b +') HEX:'+hexValue)\n if(scope.incoming == true){\n scope.incoming = false\n return\n }\n scope.send({payload:slidervalue,colors:{hex:hexValue,rgb:{r,g,b}}})\n }\n})\n \n scope.$watch('msg', function(msg) {\n if (msg) {\n if(!(\"#slider_\"+scope.$id)){\n return\n }\n scope.incoming = true\n scope.slidervalue = msg.payload\n }\n });\n})(scope);\n</script>","storeOutMessages":true,"fwdInMessages":false,"resendOnRefresh":true,"templateScope":"local","x":410,"y":1640,"wires":[["41bcf137.06a9e"]]},{"id":"41bcf137.06a9e","type":"debug","z":"9f4fbba4.68ceb8","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":650,"y":1640,"wires":[]},{"id":"b90f245f.f2f078","type":"inject","z":"9f4fbba4.68ceb8","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"0.5","payloadType":"num","x":190,"y":1600,"wires":[["bdc44b29.79d388"]]},{"id":"152c7cb7.8c8b73","type":"ui_numeric","z":"9f4fbba4.68ceb8","name":"","label":"slider val","tooltip":"","group":"20ae1040.3cf58","order":3,"width":0,"height":0,"wrap":false,"passthru":true,"topic":"topic","topicType":"msg","format":"{{value}}","min":0,"max":"1","step":"0.1","x":180,"y":1640,"wires":[["bdc44b29.79d388"]]},{"id":"20ae1040.3cf58","type":"ui_group","name":"Group 1","tab":"6b520bda.e997a4","order":1,"disp":true,"width":"6","collapse":false},{"id":"6b520bda.e997a4","type":"ui_tab","name":"Experimentieren","icon":"dashboard","order":3,"disabled":false,"hidden":false}]
