As we do currently waiting for gauge widget, the one can at least use this poor man version of ui-level replica.
[{"id":"cf79351b4995d067","type":"ui-slider","z":"4eb808f5e19fb7e2","group":"5d78082af21e201d","name":"","label":"slider","tooltip":"","order":3,"width":0,"height":0,"passthru":false,"outs":"all","topic":"topic","topicType":"msg","thumbLabel":true,"min":0,"max":"100","step":1,"className":"","x":330,"y":280,"wires":[["7b950200a285852f","b0e36cfaef476d35"]]},{"id":"b0e36cfaef476d35","type":"ui-template","z":"4eb808f5e19fb7e2","group":"5d78082af21e201d","page":"","ui":"","name":"Linear Led Gauge","order":0,"width":"6","height":"1","head":"","format":"<template>\n <div class=\"led-level\">\n <div class=\"led-level-text\">\n <span class=\"led-level-label\">{{label}}</span>\n <span class=\"led-level-value\">{{formattedValue}}<span class=\"led-level-unit\">{{unit}}</span></span>\n </div>\n <div class=\"led-level-stripe\" :class=\"{ vertical: isVertical}\">\n <div v-for=\"(color, index) in colors\" :key=\"index\" class=\"led-level-led\" :ref=\"'dot-' + index +'-'+this.id\"></div>\n </div>\n <div class=\"led-level-limits\">\n <span>{{min}}</span>\n <span>{{max}}</span>\n </div>\n <div>\n</template>\n\n<script>\nexport default {\n data(){\n return {\n //define me here \n min:0,\n label:\"MEASURE\",\n unit:\"cm³\",\n max:100,\n dark:0.4,\n isVertical:false,\n animate:true, \n colors:[\"#4ed34e\",\n \"#4ed34e\",\n \"#4ed34e\",\n \"#4ed34e\",\n \"#4ed34e\",\n \"#4ed34e\",\n \"#4ed34e\",\n \"#4ed34e\",\n \"#4ed34e\",\n \"#4ed34e\",\n \"#ffcf00\",\n \"#ffcf00\",\n \"#ffcf00\",\n \"#ffcf00\",\n \"red\",\n \"red\",\n \"red\"],\n\n //no need to change those\n value:0,\n previousValue:0,\n inited:false\n }\n },\n\n \n methods: { \n getElement: function(name){\n return this.$refs[name][0]\n },\n\n full: function(){\n return Math.floor(this.colors.length*this.percentage/100)\n },\n half: function (){\n let p = this.colors.length*this.percentage/100;\n p -= this.full()\n p *= .5\n p += this.dark;\n return p;\n },\n\n lit: function(){\n if(this.inited == false){\n return\n }\n const down = this.previousValue > this.value\n\n let time = .01\n this.colors.forEach((e,i) => {\n let dot = this.getElement(\"dot-\"+i+\"-\"+this.id);\n if(!dot){\n console.log(\"no dots found\")\n return\n } \n if(i<this.full()){\n dot.style.filter= \"brightness(1.1)\";\n }\n else if(i==this.full()){ \n dot.style.filter = \"brightness(\"+this.half()+\")\";\n }\n else{\n dot.style.filter= \"brightness(\"+this.dark+\")\";\n }\n if(down){\n time = (this.colors.length - i) * .12 \n }\n dot.style.transition = this.animate ? \"filter \"+time+\"s\" : \"unset\";\n })\n this.previousValue = this.value\n }\n },\n watch: {\n msg: function(){ \n if(this.msg.payload != undefined){ \n this.value = this.msg.payload \n this.lit()\n }\n }\n },\n computed: {\n formattedValue: function () {\n return this.value.toFixed(2)\n },\n percentage: function(){\n return Math.floor(((this.value - this.min) / (this.max - this.min)) * 100);\n }\n },\n mounted(){\n this.colors.forEach((c,i) => {\n let dot = this.getElement(\"dot-\"+i+\"-\"+this.id);\n if(!dot){\n console.log(\"no dots found\")\n return\n }\n dot.style.backgroundColor = c \n dot.style.transition = \"filter 0.1s\";\n }\n ) \n this.inited = true;\n },\n \n}\n</script>\n","storeOutMessages":true,"passthru":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":630,"y":280,"wires":[[]]},{"id":"de08b76d5e936b8a","type":"ui-template","z":"4eb808f5e19fb7e2","group":"","page":"","ui":"da26eafa8eb48ab3","name":"Linear Led Gauge for Dasboard 2.0 CSS","order":0,"width":0,"height":0,"head":"","format":".led-level{\n display: grid;\n grid-template-rows: 1.3em 1fr .7em;\n gap: 2px;\n}\n.led-level-stripe{\n display: flex;\n gap:2px;\n} \n.led-level-led {\n background: #ffffff;\n width: 100%;\n height: 100%;\n border-radius: 4px;\n box-shadow: inset 0px 0px 10px 0px #00000099, 0px 0px 3px 0px #00000099;\n filter: brightness(0.4);\n}\n.led-level-text{\n font-size: 1.25em;\n line-height: 1em;\n align-self: end;\n display: flex;\n flex-wrap: wrap;\n justify-content: space-between;\n user-select: none;\n}\n.led-level-value{ \n font-weight:bold;\n}\n.led-level-unit{\n font-size:.75em;\n font-weight:normal;\n padding-inline-start: 0.15em;\n}\n.led-level-limits{\n display: flex;\n justify-content: space-between;\n font-size: .75em;\n line-height: .75em;\n align-content: flex-end;\n flex-wrap: wrap;\n user-select: none;\n}","storeOutMessages":true,"passthru":true,"resendOnRefresh":true,"templateScope":"site:style","className":"","x":700,"y":240,"wires":[[]]},{"id":"5d78082af21e201d","type":"ui-group","name":"Some stuff","page":"71097e9858ab99f9","width":"6","height":"1","order":3,"showTitle":true,"className":"","visible":"true","disabled":"false"},{"id":"da26eafa8eb48ab3","type":"ui-base","name":"Board","path":"/dashboard"},{"id":"71097e9858ab99f9","type":"ui-page","name":"Test page","ui":"da26eafa8eb48ab3","path":"/second","icon":"home","layout":"grid","theme":"a965ccfef139317a","order":-1,"className":"","visible":"true","disabled":"false"},{"id":"a965ccfef139317a","type":"ui-theme","name":"Default","colors":{"surface":"#5c5c5c","primary":"#0094ce","bgPage":"#383838","groupBg":"#4f4f4f","groupOutline":"#858585"},"sizes":{"pagePadding":"12px","groupGap":"12px","groupBorderRadius":"4px","widgetGap":"12px"}}]
