Not clue what you have tried. Very messy.
May be that way it will be simpler ...
[{"id":"bdc44b29.79d388","type":"ui_template","z":"ea1d3f40.afc6e","group":"20ae1040.3cf58","name":"color slider based on md-slider","order":1,"width":"6","height":"1","format":"<div id=\"{{'slider_'+$id}}\" class=\"color-sider-container\">\n <md-slider ng-model=\"slidervalue\" step=\"0.01\" min=\"0\" max=\"1\"></md-slider>\n</div>\n<style>\n.color-sider-container{\n\n}\n.color-sider-container > md-slider{\n height:40px;\n margin-left: 8px;\n margin-right: 8px;\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) {\n \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 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 \n \nscope.$watch('slidervalue', function(slidervalue) {\n if (slidervalue) {\n var { r, g, b } = findRgbFromSliderValue(slidervalue);\n var hexValue = rgbToHex(r, g, b);\n $(\"#slider_\"+scope.$id).find('.md-thumb').css(\"background-color\",hexValue);\n \n }\n})\n \n scope.$watch('msg', function(msg) {\n if (msg) {\n // Do something when msg arrives\n }\n });\n})(scope);\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":490,"y":340,"wires":[[]]},{"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":1,"disabled":false,"hidden":false}]
