Ui_template md-slider help - workable, almost complete

Dashboard
1

I have these two sliders but cannot work them independently.
image
image

[{"id":"279500ed.f416b","type":"ui_template","z":"b5cc8912.1fc848","group":"b290cc21.d734d","name":"ranges","order":1,"width":8,"height":"2","format":"<!--\nOK\n<div id=\"slidernew1\">\n    <md-slider-container>\n        <md-slider min=\"0\" max=\"100\" ng-model=\"msg.payload\" ng-change=\"send(msg)\"></md-slider>\n        <span style=\"padding-right: 18px; text-align: right\">{{msg.payload}}</span>\n    </md-slider-container> \n</div>\nBust\n<div id=\"slidernew1\">\n    <md-slider-container>\n        <mdb-multi-range-input id=\"multi-range\" min=\"0\" max=\"100\" [value]=\"{ first: 10, second: 80 }\"></mdb-multi-range-input>\n    </md-slider-container> \n</div>\n<div id=\"slidernew1\">\n    <md-slider-container>\n        <mdb-multi-range-input id=\"multi-range\" min=\"0\" max=\"100\"></mdb-multi-range-input>\n    </md-slider-container> \n</div>\n<div id=\"slider\">\n<rzslider class=\"custom-slider\"\n          rz-slider-model=\"slider.minValue\"\n          rz-slider-high=\"slider.maxValue\"\n          rz-slider-options=\"slider.options\"></rzslider>\n</div>\n<div id=\"slidernew1\">\n<md-slider-container>\n    <rzslider rz-slider-model=\"slider.minValue\"\n          rz-slider-high=\"slider.maxValue\"\n          rz-slider-options=\"slider.options\"></rzslider>\n\n</md-slider-container> \n</div>\n//<div>\n//    <input type=\"time\" id=\"timeFrom\" class=\"timepicker\" >\n//    <input type=\"time\" id=\"timeTo\" class=\"timepicker\" >\n//</div>\n//(function(scope) {\n//    var timepicker = $(\".timepicker\")\n//    timepicker.on('change', function(evt) {\n//        scope.send({ topic: this.id, payload: this.value });\n//    });\n//})(scope);\n\n        <md-slider id=\"cks1\" class=\"ck-slider\" md-invert=true min=\"0\" max=\"200\" ng-model=\"msg.payload\" ng-change=\"send(msg)\"></md-slider>\n        <md-slider id=\"cks2\" class=\"ck-slider\" min=\"0\" max=\"200\" ng-model=\"msg.payload\" ng-change=\"send(msg)\"></md-slider>\n\n            ng-change=\"send(msg)\"></md-slider>\n\n-->\n\n<div id=\"slidernew11\">\n    <md-slider-container>\n        <span style=\"padding-left: 18px; \n            text-align: left\">{{msg.payload}}</span>\n        <md-slider id=\"cks11\" \n            class=\"ck-slider1\" \n            md-invert=true \n            min=\"0\" max=\"200\" \n            ng-model=\"msg.payload\" \n            ng-change=\"send({payload: msg.payload, topic: 'cks11'})\"></md-slider>\n        <md-slider id=\"cks12\" \n            class=\"ck-slider1\" \n            min=\"0\" max=\"200\"\n            ng-model=\"msg.payload\" \n            ng-change=\"send({payload: msg.payload, topic: 'cks12'})\"></md-slider>\n        <span style=\"padding-right: 18px; \n            text-align: right\">{{msg.payload}}</span>\n    </md-slider-container> \n</div>\n<script type=\"text/javascript\">\n(function($scope) {\n    //debugger\n    setTimeout(function() {\n        //debugger\n        $scope.init();\n    },100);\n    $scope.init = function () {\n        //debugger\n        console.log(\"$scope.init called. Adding event handlers to all elements with class ck-slider1\");\n        var clickSliders = $(\".ck-slider1\") \n\n        clickSliders[0].maxValue =90;\n        clickSliders[0].options= {\n            floor: 0,\n            ceil: 100,\n            step: 10,\n            showTicks: true\n        };\n        clickSliders[1].maxValue= 90;\n        clickSliders[1].options= {\n            floor: 0,\n            ceil: 100,\n            step: 10,\n            showTicks: true\n        };\n      \n        clickSliders.on('change', function(evt) {\n            console.log(\"slider id:\"+ this.id);\n            scope.send({ topic: this.id, payload: this.value });\n        });\n    };\n    $scope.$watch('msg', function(msg) {\n        //debugger\n        if(!msg){ //if no msg \n            console.log(\"$scope.$watch('msg', ...) - msg is empty\");\n            return;\n        }\n        console.log(\"$scope.$watch(msg)t:\" + msg.topic + \" p:\" + msg.payload);\n    }); \n})(scope);    \n\n</script>\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":130,"y":100,"wires":[["e62b6026.e589"]]},{"id":"e62b6026.e589","type":"debug","z":"b5cc8912.1fc848","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":230,"y":100,"wires":[]},{"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}]

Can anyone please help ?

2

image
image

<div id="slidernew11" style="overflow: hidden;">
    <md-slider-container>
        <span id="lower" ng-bind="lower" style="padding-left: 18px; 
            text-align: left"></span>
        <md-slider
            class="ck-slider-lower" 
            min="0" max="200" value="11" 
            ng-model="lower" 
            ng-change="send({payload: lower, topic: 'lower'});"></md-slider>
        <md-slider
            class="ck-slider-upper" 
            min="0" max="200" value="99"
            ng-model="upper" 
            ng-change="send({payload: upper, topic: 'upper'});"></md-slider>
        <span id="upper" ng-bind="upper" style="padding-right: 18px; 
            text-align: right"></span>
    </md-slider-container> 
</div>
<script type="text/javascript">
(function($scope) {
    //debugger
    setTimeout(function() {
        //debugger
        $scope.init();
    },100);
    var SLIDER_CLASS = ".ck-slider-";
    $scope.init = function () {
        //debugger
        console.log("$scope.init called. Adding event handlers to all elements with class ck-slider1");
        var clickSlider1 = $(SLIDER_CLASS+"lower") 
        var clickSlider2 = $(SLIDER_CLASS+"upper") 

        clickSlider1.maxValue =90;
        clickSlider1.options= {
            floor: 0,
            ceil: 100,
            step: 10,
            showTicks: true
        };
        clickSlider2.maxValue= 90;
        clickSlider2.options= {
            floor: 0,
            ceil: 100,
            step: 10,
            showTicks: true
        };
      
        //Never gets called
        clickSlider1.on('change', function(evt) {
            console.log("slider id:"+ this.id);
            scope.send({ topic: this.id, payload: this.value });
        });
        //Never gets called
        clickSlider2.on('change', function(evt) {
            console.log("slider id:"+ this.id);
            scope.send({ topic: this.id, payload: this.value });
        });
    };
    $scope.$watch('msg', function(msg) {
        //debugger
        if(!msg){ //if no msg 
            console.log("$scope.$watch('msg', ...) - msg is empty");
            return;
        }
        console.log("$scope.$watch(msg)t:" + msg.topic + " p:" + msg.payload);
        
        var $span_upper = $("#upper");//get the display
        var $slider_upper = $(SLIDER_CLASS+"lowerupper");//get the slider
        var $span_lower = $("#lower");//get the display
        var $slider_lower = $(SLIDER_CLASS+"lower");//get the slider
        var half = Math.round(msg.payload/2);
        switch(msg.topic){
            case 'upper':
                //Move the lower to half.
                $span_upper.text(msg.payload);
                $slider_upper.val = msg.payload;
                $span_lower.text(half);
                $slider_lower.val = half;
                $scope.send({topic: 'lower', payload: half})
                break;
            case 'lower':
                //Move the upper to half.
//                setTimeout(function() {
                $span_lower.text(msg.payload);
                $slider_lower.val = msg.payload;
                $span_upper.text(half);
                $slider_upper.val = half;
                $scope.send({topic: 'upper', payload: half})
//                },100);
                break;
            default:
        }
    }); 
})(scope);    

</script>

image
So they act independently now.

I have searched high and low for working ng-bind/ng-model examples but could not find a solution that would load (several solutions complained with JSON array errors and seemed too old to enter into any discussion as to a fix).

Why can I not move a slider under js control ?

Why can I not intercept the change event ?

Why if I enable 'Add output...' the flow goes into an infinite loop yet again ?

[{"id":"279500ed.f416b","type":"ui_template","z":"b5cc8912.1fc848","group":"b290cc21.d734d","name":"ranges","order":1,"width":"8","height":"1","format":"<!--\nOK\n<div id=\"slidernew1\">\n    <md-slider-container>\n        <md-slider min=\"0\" max=\"100\" ng-model=\"msg.payload\" ng-change=\"send(msg)\"></md-slider>\n        <span style=\"padding-right: 18px; text-align: right\">{{msg.payload}}</span>\n    </md-slider-container> \n</div>\n<md-input-container  style=\"overflow:hidden;margin: 0px;\">\n    <span><label>User Input </label>\n    <input ng-model=\"msg.payload\"  type=\"search\"  ng-change=\"send(msg)\"></span>\n</md-input-container>\nBust\n<div id=\"slidernew1\">\n    <md-slider-container>\n        <mdb-multi-range-input id=\"multi-range\" min=\"0\" max=\"100\" [value]=\"{ first: 10, second: 80 }\"></mdb-multi-range-input>\n    </md-slider-container> \n</div>\n<div id=\"slidernew1\">\n    <md-slider-container>\n        <mdb-multi-range-input id=\"multi-range\" min=\"0\" max=\"100\"></mdb-multi-range-input>\n    </md-slider-container> \n</div>\n<div id=\"slider\">\n<rzslider class=\"custom-slider\"\n          rz-slider-model=\"slider.minValue\"\n          rz-slider-high=\"slider.maxValue\"\n          rz-slider-options=\"slider.options\"></rzslider>\n</div>\n<div id=\"slidernew1\">\n<md-slider-container>\n    <rzslider rz-slider-model=\"slider.minValue\"\n          rz-slider-high=\"slider.maxValue\"\n          rz-slider-options=\"slider.options\"></rzslider>\n\n</md-slider-container> \n</div>\n//<div>\n//    <input type=\"time\" id=\"timeFrom\" class=\"timepicker\" >\n//    <input type=\"time\" id=\"timeTo\" class=\"timepicker\" >\n//</div>\n//(function(scope) {\n//    var timepicker = $(\".timepicker\")\n//    timepicker.on('change', function(evt) {\n//        scope.send({ topic: this.id, payload: this.value });\n//    });\n//})(scope);\n\n        <md-slider id=\"cks1\" class=\"ck-slider\" md-invert=true min=\"0\" max=\"200\" ng-model=\"msg.payload\" ng-change=\"send(msg)\"></md-slider>\n        <md-slider id=\"cks2\" class=\"ck-slider\" min=\"0\" max=\"200\" ng-model=\"msg.payload\" ng-change=\"send(msg)\"></md-slider>\n\n            ng-change=\"send(msg)\"></md-slider>\nmd-invert=true \n          md-vertical   \n-->\n\n<div id=\"slidernew11\" style=\"overflow: hidden;\">\n    <md-slider-container>\n        <span id=\"lower\" ng-bind=\"lower\" style=\"padding-left: 18px; \n            text-align: left\"></span>\n        <md-slider\n            class=\"ck-slider-lower\" \n            min=\"0\" max=\"200\" value=\"11\" \n            ng-model=\"lower\" \n            ng-change=\"send({payload: lower, topic: 'lower'});\"></md-slider>\n        <md-slider\n            class=\"ck-slider-upper\" \n            min=\"0\" max=\"200\" value=\"99\"\n            ng-model=\"upper\" \n            ng-change=\"send({payload: upper, topic: 'upper'});\"></md-slider>\n        <span id=\"upper\" ng-bind=\"upper\" style=\"padding-right: 18px; \n            text-align: right\"></span>\n    </md-slider-container> \n</div>\n<script type=\"text/javascript\">\n(function($scope) {\n    //debugger\n    setTimeout(function() {\n        //debugger\n        $scope.init();\n    },100);\n    var SLIDER_CLASS = \".ck-slider-\";\n    $scope.init = function () {\n        //debugger\n        console.log(\"$scope.init called. Adding event handlers to all elements with class ck-slider1\");\n        var clickSlider1 = $(SLIDER_CLASS+\"lower\") \n        var clickSlider2 = $(SLIDER_CLASS+\"upper\") \n\n        clickSlider1.maxValue =90;\n        clickSlider1.options= {\n            floor: 0,\n            ceil: 100,\n            step: 10,\n            showTicks: true\n        };\n        clickSlider2.maxValue= 90;\n        clickSlider2.options= {\n            floor: 0,\n            ceil: 100,\n            step: 10,\n            showTicks: true\n        };\n      \n        //Never gets called\n        clickSlider1.on('change', function(evt) {\n            console.log(\"slider id:\"+ this.id);\n            scope.send({ topic: this.id, payload: this.value });\n        });\n        //Never gets called\n        clickSlider2.on('change', function(evt) {\n            console.log(\"slider id:\"+ this.id);\n            scope.send({ topic: this.id, payload: this.value });\n        });\n    };\n    $scope.$watch('msg', function(msg) {\n        //debugger\n        if(!msg){ //if no msg \n            console.log(\"$scope.$watch('msg', ...) - msg is empty\");\n            return;\n        }\n        console.log(\"$scope.$watch(msg)t:\" + msg.topic + \" p:\" + msg.payload);\n        \n        var $span_upper = $(\"#upper\");//get the display\n        var $slider_upper = $(SLIDER_CLASS+\"lowerupper\");//get the slider\n        var $span_lower = $(\"#lower\");//get the display\n        var $slider_lower = $(SLIDER_CLASS+\"lower\");//get the slider\n        var half = Math.round(msg.payload/2);\n        switch(msg.topic){\n            case 'upper':\n                //Move the lower to match.\n                $span_upper.text(msg.payload);\n                $slider_upper.val = msg.payload;\n                $span_lower.text(half);\n                $slider_lower.val = half;\n                $scope.send({topic: 'lower', payload: half})\n                break;\n            case 'lower':\n                //Move the upper to match.\n//                setTimeout(function() {\n                $span_lower.text(msg.payload);\n                $slider_lower.val = msg.payload;\n                $span_upper.text(half);\n                $slider_upper.val = half;\n                $scope.send({topic: 'upper', payload: half})\n//                },100);\n                break;\n            default:\n        }\n    }); \n})(scope);    \n\n</script>\n","storeOutMessages":false,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":130,"y":100,"wires":[["e62b6026.e589"]]},{"id":"e62b6026.e589","type":"debug","z":"b5cc8912.1fc848","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":250,"y":100,"wires":[]},{"id":"a52d2d96.be5d9","type":"ui_numeric","z":"b5cc8912.1fc848","name":"lower","label":"Lower","tooltip":"","group":"b290cc21.d734d","order":2,"width":"4","height":"1","wrap":false,"passthru":false,"topic":"lower","format":"{{value}}","min":0,"max":"200","step":"10","x":130,"y":160,"wires":[["279500ed.f416b"]]},{"id":"6865970a.5fad08","type":"ui_numeric","z":"b5cc8912.1fc848","name":"upper","label":"Upper","tooltip":"","group":"b290cc21.d734d","order":2,"width":"4","height":"1","wrap":false,"passthru":false,"topic":"upper","format":"{{value}}","min":0,"max":"200","step":"10","x":130,"y":220,"wires":[["279500ed.f416b"]]},{"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}]
3

Instead of all this why,why,why stuff I will settle for:

Does anyone know how to move the thumb on a md-slider ?

4

Managed to push things forward a little more (animations would be good if I knew how).
image
image

Does anyone know how to display the value bubble ?
image

[{"id":"7c5839a9.079138","type":"tab","label":"Flow 1","disabled":false,"info":""},{"id":"7bd7bfa6.bb066","type":"ui_template","z":"7c5839a9.079138","group":"b290cc21.d734d","name":"","order":3,"width":6,"height":1,"format":"<!--\nlayout=\"row\"\n-->\n<div class=\"slider-wrapper-v1;\" \n    style=\"width:100% !important; max-width:100% !important; \n        overflow: hidden !important;\">\n    <md-slider thumbLabel md-sign md-thumb-text \n        style=\"max-width:100% !important; width:100% !important; \n        top:-2px !important; height: 50px !important;\" \n        aria-label = \"msg.payload.v1\" \n        ng-model=\"msg.payload.v1\" \n        ng-change=\"send(msg)\" \n        flex=\"30\" min=\"0\" max=\"255\" \n        class=\"slider-v1\">\n    </md-slider>\n</div>\n<div class=\"slider-wrapper-v2;\" \n    style=\"width:100% !important; max-width:100% !important; \n        overflow: hidden !important;\">\n    <md-slider thumbLabel md-sign md-thumb-text \n        style=\"max-width:100% !important; width:100% !important; \n        top:-2px !important; height: 50px !important;\" \n        aria-label = \"msg.payload.v2\" \n        ng-model=\"msg.payload.v2\" \n        ng-change=\"send(msg)\" \n        flex=\"30\" min=\"0\" max=\"255\" \n        class=\"slider-v2\">\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<style>\n.md-thumb:focus {\n  background-color: yellow !important;\n}\n.slider-wrapper-v2 {\n    height: 50% !important;\n}\n.slider-wrapper-v1{\n    height: 50% !important;\n}\n.slider-wrapper-v1{\n    position: absolute !important;\n    top: 50px !important;\n    height: 100% !important;\n}\n    .slider-v1 .md-track-fill {\n        background-color: var(--nr-dashboard-widgetColor) !important;\n    }\n    .slider-v1 .md-thumb:after {\n        background-color: var(--nr-dashboard-widgetColor) !important;\n        border-color: var(--nr-dashboard-widgetColor) !important;\n    }\n    .slider-v2 .md-track-fill {\n        background-color: var(--nr-dashboard-widgetColor) !important;\n    }\n    .slider-v2 .md-thumb:after {\n        background-color: var(--nr-dashboard-widgetColor) !important;\n        border-color: var(--nr-dashboard-widgetColor) !important;\n    }\n.slider-v1, .slider-v2 {\n    margin: 0px !important;\n    padding-left:10px !important;\n    padding-right:10px !important;\n}\n.slider-v1 .md-focus-ring {\n    top: -6px !important;\n}\n.slider-v2 .md-focus-ring {\n    top: 20px !important;\n}\n.slider-v1 .md-track-container {\n    top: 23px;\n}\n.slider-v2 .md-slider-content {\n    top: -22px;\n}\n.md-slider-wrapper {\n    height: 100%; !important;\n}\n.md-slider-wrapper .slider-v1 {\n    top: 23px; !important;\n}\n.md-slider-wrapper .slider-v2 {\n    top: -22px; !important;\n}\n.md-slider .md-sign,\n.md-slider .md-sign:after {\n  opacity: 1;\n  -webkit-transform: translate3d(0, 0, 0) scale(1);\n  transform: translate3d(0, 0, 0) scale(1);\n}\n}\n</style>\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":120,"y":100,"wires":[[]]},{"id":"c607e4d7.140038","type":"inject","z":"7c5839a9.079138","name":"v1<v2","props":[{"p":"payload.v1","v":"32","vt":"num"},{"p":"payload.v2","v":"64","vt":"num"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","x":110,"y":60,"wires":[["7bd7bfa6.bb066"]]},{"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":"32","vt":"num"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","x":110,"y":20,"wires":[["7bd7bfa6.bb066"]]},{"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}]
5

what do you mean by value bubble?
where do you want to display it?

6

Hi, Thanks for your response. Like this one from elsewhere in the forum.
image
https://discourse.nodered.org/t/label-length-in-slider/36125

P.S. Obviously I would wish to have a label either side for v1 and v2 range values.

7

Sorry I noticed I posted some old code. Still probably need fewer !importants;

[{"id":"7c5839a9.079138","type":"tab","label":"Flow 1","disabled":false,"info":""},{"id":"7bd7bfa6.bb066","type":"ui_template","z":"7c5839a9.079138","group":"b290cc21.d734d","name":"","order":3,"width":6,"height":1,"format":"<!--\nlayout=\"row\"\n-->\n<div class=\"slider-wrapper-v1;\" \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        aria-label = \"msg.payload.v1\" \n        aria-labelledby=\"slider-always\"\n        ng-model=\"msg.payload.v1\" \n        ng-change=\"send(msg)\" \n        flex=\"30\" min=\"0\" max=\"255\" \n        class=\"slider-v1\">\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        aria-label = \"msg.payload.v2\" \n        ng-model=\"msg.payload.v2\" \n        ng-change=\"send(msg)\" \n        flex=\"30\" min=\"0\" max=\"255\" \n        class=\"slider-v2\">\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<style>\n .slider-wrapper-v1 > .md-slider > .md-slider-wrapper > .md-slider-content > .md-thumb-container > .md-sign > span {\n    color: white;\n    transform: translate3d(0, 0, 0) scale(0.9);\n } /* md-thumb-text */\n .slider-wrapper-v1 > .md-slider > .md-slider-wrapper > .md-slider-content > .md-thumb-container > .md-sign {\n    width: 28px;\n    height: 28px;\n    top: -12px;\n }\n .slider-wrapper-v1 > .md-slider > .md-slider-wrapper > .md-slider-content > .md-thumb-container > .md-thumb:after {\n    width: 0px;\n    height: 0px;\n    border-radius: 0px;\n    border-width: 0px;\n }\n /*\n .slider-v1 > md-slider > .md-thumb-container > .md-focus-ring {\n    width: 0px;\n    height: 0px;\n }\n */\n</style>\n<style>\n.md-thumb::focus {\n    z-index: -1; position:absolute;\n}\n.slider-wrapper-v2 {\n    height: 50%;\n}\n.slider-wrapper-v1{\n    height: 50%;\n}\n.slider-wrapper-v1{\n    position: absolute !important;\n    top: 50px !important;\n    height: 100% !important;\n}\n    .slider-v1 .md-track-fill {\n        background-color: var(--nr-dashboard-widgetColor) !important;\n    }\n    .slider-v1 .md-thumb:after {\n        background-color: var(--nr-dashboard-widgetColor) !important;\n        border-color: var(--nr-dashboard-widgetColor) !important;\n    }\n    .slider-v2 .md-track-fill {\n        background-color: var(--nr-dashboard-widgetColor) !important;\n    }\n    .slider-v2 .md-thumb:after {\n        background-color: var(--nr-dashboard-widgetColor) !important;\n        border-color: var(--nr-dashboard-widgetColor) !important;\n    }\n.slider-v1, .slider-v2 {\n    margin: 0px !important;\n    padding-left:10px !important;\n    padding-right:10px !important;\n}\n.slider-v1 .md-focus-ring {\n    top: -6px !important;\n}\n.slider-v2 .md-focus-ring {\n    top: 20px !important;\n}\n.slider-v1 .md-track-container {\n    top: 23px;\n}\n.slider-v2 .md-slider-content {\n    top: -22px;\n}\n.md-slider-wrapper {\n    height: 100%; !important;\n}\n.md-slider-wrapper .slider-v1 {\n    top: 23px; !important;\n}\n.md-slider-wrapper .slider-v2 {\n    top: -22px; !important;\n}\n.md-slider .md-sign,\n.md-slider .md-sign:after {\n  opacity: 1;\n  -webkit-transform: translate3d(0, 0, 0) scale(1) !important;\n  transform: translate3d(0, 0, 0) scale(1) !important;\n}\n}\n</style>\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":120,"y":100,"wires":[[]]},{"id":"c607e4d7.140038","type":"inject","z":"7c5839a9.079138","name":"v1<v2","props":[{"p":"payload.v1","v":"32","vt":"num"},{"p":"payload.v2","v":"64","vt":"num"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","x":110,"y":60,"wires":[["7bd7bfa6.bb066"]]},{"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":"32","vt":"num"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","x":110,"y":20,"wires":[["7bd7bfa6.bb066"]]},{"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}]
8

I modified the setting a bit and made the bubbles smaller not to overlap the lines:

Screenshot 2020-12-16 163815
Screenshot 2020-12-16 163815702×628 19.2 KB

The template is as widget in group

<style>
 #HzZeitbegrenzt_Temperaturen_anpassen_cards > md-card > p.label {
    min-width: 18%;
 }
 
 #HzZeitbegrenzt_Temperaturen_anpassen_cards > md-card > md-slider > div > div > div.md-thumb-container > div.md-sign > span {
    color: white;
    transform: translate3d(0, 0, 0) scale(0.9);
 }
 #HzZeitbegrenzt_Temperaturen_anpassen_cards > md-card > md-slider > div > div > div.md-thumb-container > div.md-sign {
    width: 28px;
    height: 28px;
    top: -12px;
 }
 #HzZeitbegrenzt_Temperaturen_anpassen_cards > md-card > md-slider > div > div > div.md-thumb-container > div.md-thumb:after {
    width: 0px;
    height: 0px;
    border-radius: 0px;
    border-width: 0px;
 }
 
 #HzZeitbegrenzt_Temperaturen_anpassen_cards > md-card > md-slider > div > div > div.md-thumb-container > div.md-focus-ring {
    width: 0px;
    height: 0px;
 }
</style>

and the sliders are standard.

slider
slider994×1274 54.8 KB

1 Like
9

Hi, Thank you for your response. My example is made from two standard md-sliders also but I cannot adapt your html structured css for my HTML

<div class="slider-wrapper-v1;" 
    style="width:100%;max-width:100%;overflow: hidden;">
    <md-slider thumbLabel md-sign md-thumb-text 
        style="max-width:100%; width:100%; 
        top:-2px; height: 50px;" 
        aria-label = "msg.payload.v1" 
        aria-labelledby="slider-always"
        ng-model="msg.payload.v1" 
        ng-change="send(msg)" 
        flex="30" min="0" max="255" 
        class="slider-v1">
    </md-slider>
</div>
<div class="slider-wrapper-v2;" 
    style="width:100%;max-width:100%;overflow: hidden;">
    <md-slider thumbLabel md-sign md-thumb-text 
        style="max-width:100%; width:100%; 
        top:-2px; height: 50px;" 
        aria-label = "msg.payload.v2" 
        ng-model="msg.payload.v2" 
        ng-change="send(msg)" 
        flex="30" min="0" max="255" 
        class="slider-v2">
    </md-slider>
</div>

So I have tried:

<style>
 .slider-wrapper-v1 > .md-slider > .md-slider-wrapper > .md-slider-content > .md-thumb-container > .md-sign > span {
    color: white;
    transform: translate3d(0, 0, 0) scale(0.9);
 } /* md-thumb-text */
 .slider-wrapper-v1 > .md-slider > .md-slider-wrapper > .md-slider-content > .md-thumb-container > .md-sign {
    width: 28px;
    height: 28px;
    top: -12px;
 }
 .slider-wrapper-v1 > .md-slider > .md-slider-wrapper > .md-slider-content > .md-thumb-container > .md-thumb:after {
    width: 0px;
    height: 0px;
    border-radius: 0px;
    border-width: 0px;
 }
 /*
 .slider-v1 > md-slider > .md-thumb-container > .md-focus-ring {
    width: 0px;
    height: 0px;
 }
 */
</style>

But with no luck ?

P.S. Would it be possible for you to export a template with a slider so I have a display to work with and check it out in the browser ?

10

A little further forward if any one is interested ?
image
Image after selection is OK but the selection is way off:
image
And the lower selection is worse, as:it just dissapears.
image

Any ideas anyone ?

[{"id":"7bd7bfa6.bb066","type":"ui_template","z":"7c5839a9.079138","group":"b290cc21.d734d","name":"","order":3,"width":6,"height":1,"format":"<!--\nTODO: style thumb focus\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        aria-label = \"msg.payload.v1\" \n        aria-labelledby=\"slider-always\"\n        ng-model=\"msg.payload.v1\" \n        ng-change=\"send(msg)\" \n        flex=\"30\" min=\"0\" max=\"255\" \n        class=\"slider-v1\">\n         <div class=\"md-slider-wrapper\">\n            <div class=\"md-track-container\">\n                <div class=\"md-track\"></div>\n                <div class=\"md-track md-track-fill\" \n                    style=\"width: 55%;\"></div>\n                <div class=\"md-track-ticks\">\n                    <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><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=\"30\" min=\"0\" max=\"255\" \n        class=\"slider-v2\">\n         <div class=\"md-slider-wrapper\">\n            <div class=\"md-track-container\">\n                <div class=\"md-track\"></div>\n                <div class=\"md-track md-track-fill\" \n                    style=\"width: 55%;\"></div>\n                <div class=\"md-track-ticks\">\n                    <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><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    .md-thumb-text {\n        color: var(--nr-dashboard-widgetTextColor) !important;\n    }\n   .slider-v1 .md-sign,\n    .slider-v1 .md-sign:after {\n    opacity: 1;\n    transform: translate3d(0, 16px, 0) scale(0.85);\n    }\n    .slider-v2 .md-sign,\n    .slider-v2 .md-sign:after {\n    opacity: 1;\n    transform: translate3d(0, 37px, 0) scale(0.85);\n    }\n.md-focus-ring {\n    width: 0px;\n    height: 0px;\n }\n .md-sign {\n    background-color: var(--nr-dashboard-widgetBgndColor) !important;\n    width: 28px;\n    height: 28px;\n    top: -12px;\n }\n\n.slider-wrapper-v2 {\n    height: 50%;\n}\n.slider-wrapper-v1{\n    height: 50%;\n}\n.slider-wrapper-v1{\n    position: absolute !important;\n    top: 50px !important;\n    height: 100% !important;\n}\n    .slider-v1 .md-track-fill {\n        background-color: var(--nr-dashboard-widgetColor) !important;\n    }\n    .slider-v1 .md-thumb:after {\n        background-color: var(--nr-dashboard-widgetColor) !important;\n        border-color: var(--nr-dashboard-widgetColor) !important;\n    }\n    .slider-v2 .md-track-fill {\n        background-color: var(--nr-dashboard-widgetColor) !important;\n    }\n    .slider-v2 .md-thumb:after {\n        background-color: var(--nr-dashboard-widgetColor) !important;\n        border-color: var(--nr-dashboard-widgetColor) !important;\n    }\n.slider-v1, .slider-v2 {\n    margin: 0px !important;\n    padding-left:10px !important;\n    padding-right:10px !important;\n}\n.slider-v1 .md-focus-ring {\n    top: -6px !important;\n}\n.slider-v2 .md-focus-ring {\n    top: 20px !important;\n}\n.slider-v1 .md-track-container {\n    top: 23px;\n}\n.slider-v2 .md-slider-content {\n    top: -22px;\n}\n.md-slider-wrapper {\n    height: 100%; !important;\n}\n.md-slider-wrapper .slider-v1 {\n    top: 23px; !important;\n}\n.md-slider-wrapper .slider-v2 {\n    top: -22px; !important;\n}\n\n</style>\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":120,"y":100,"wires":[[]]},{"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}]
11

Closer
image
Just a problem with when the element has focus
image `

[{"id":"7bd7bfa6.bb066","type":"ui_template","z":"7c5839a9.079138","group":"b290cc21.d734d","name":"","order":3,"width":6,"height":1,"format":"<!--\nTODO: style thumb focus\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><div class=\"md-disabled-thumb\"></div>\n            </div>\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\" \n                    style=\"width: 55%;\"></div>\n                <div class=\"md-track-ticks\">\n                    <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><div class=\"md-disabled-thumb\"></div>\n            </div>        </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\" \n                    style=\"width: 55%;\"></div>\n                <div class=\"md-track-ticks\">\n                    <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><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>\nmd-slider[md-discrete]:not([disabled]):not(.slider-v2):focus .md-sign,\nmd-slider[md-discrete]:not([disabled]):not(.slider-v2):focus .md-sign:after,\nmd-slider[md-discrete]:not([disabled]):not(.slider-v2):hover .md-sign,\nmd-slider[md-discrete]:not([disabled]):not(.slider-v2):hover .md-sign:after,\nmd-slider[md-discrete]:not([disabled]):not(.slider-v2):active .md-sign,\nmd-slider[md-discrete]:not([disabled]):not(.slider-v2):active .md-sign:after {\n    opacity: 1;\n  -webkit-transform: translate3d(0, 12px, 0) scale(1);\n    transform: translate3d(0, 12px, 0) scale(1);\n}\nmd-slider[md-discrete]:not([disabled]):not(.slider-v2):not(:hover) .md-sign,\nmd-slider[md-discrete]:not([disabled]):not(.slider-v2):not(:hover) .md-sign:after,\nmd-slider[md-discrete]:not(.slider-v2) .md-sign,\nmd-slider[md-discrete]:not(.slider-v2) .md-sign:after {\n  opacity: 1;\n  -webkit-transform: translate3d(0, 12px, 0) scale(1);\n  transform: translate3d(0, 12px, 0) scale(1);\n}\nmd-slider[md-discrete]:not([disabled]):not(.slider-v1):focus .md-sign,\nmd-slider[md-discrete]:not([disabled]):not(.slider-v1):focus .md-sign:after,\nmd-slider[md-discrete]:not([disabled]):not(.slider-v1):hover .md-sign,\nmd-slider[md-discrete]:not([disabled]):not(.slider-v1):hover .md-sign:after,\nmd-slider[md-discrete]:not([disabled]):not(.slider-v1):active .md-sign,\nmd-slider[md-discrete]:not([disabled]):not(.slider-v1):active .md-sign:after {\n    opacity: 1;\n  -webkit-transform: translate3d(0, 42px, 0) scale(1);\n    transform: translate3d(0, 42px, 0) scale(1);\n}\nmd-slider[md-discrete]:not([disabled]):not(.slider-v1):not(:hover) .md-sign,\nmd-slider[md-discrete]:not([disabled]):not(.slider-v1):not(:hover) .md-sign:after,\nmd-slider[md-discrete]:not(.slider-v1) .md-sign,\nmd-slider[md-discrete]:not(.slider-v1) .md-sign:after {\n  opacity: 1;\n  -webkit-transform: translate3d(0, 42px, 0) scale(1);\n  transform: translate3d(0, 42px, 0) scale(1);\n}\n.md-sign {\n    background-color: var(--nr-dashboard-widgetBgndColor) !important;\n    width: 28px !important;\n    height: 28px !important;\n    top: -17px !important;\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 !important;\n    top: 50px !important;\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 !important;\n    padding-left:10px !important;\n    padding-right:10px !important;\n}\n.slider-v1 .md-track-content {\n    top: 23px;\n}\n.slider-v2 .md-slider-content {\n    top: -22px;\n}\n.md-slider-wrapper {\n    height: 100%; !important;\n}\n.md-slider-wrapper .slider-v1 {\n    top: 23px; !important;\n}\n.md-slider-wrapper .slider-v2 {\n    top: -23px; !important;\n}\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}]
12

If any one is interested the focus and drag are now OK.
image
image

TODO: track fill between thumbs.

No clue how to do this yet. Any ideas anyone ?
image

[{"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}]
13

Happy new year all. Hats off to all CSS jockeys around the world this was a real struggle for me and not all done yet I would guess.

Here for your consumption:
image image

[{"id":"bd6a122b.f50f6","type":"tab","label":"Flow 1","disabled":false,"info":""},{"id":"e86761a9.beaeb","type":"ui_template","z":"bd6a122b.f50f6","group":"bb12aba1.d14278","name":"Range CSS","order":2,"width":4,"height":1,"format":"<!--\n    Range Slider\n    ============\n   \n    Outputs {v1: value, v2: value} on mouse up.\n   \n    Designed with 48px x 48px dashboard grid and seems to work\n    with widget heights greater than one.\n    This is a discrete range slider made from two single overlapping thumb md-sliders\n    The focus dividing line is on each side of the track.\n   \n   Untested: 90 Deg. rotation.\n   \n   Fits in 48px high space.    \n    \n   TODO: \n   (1) General Pi touch screen problem - disable copy and select.\n   (2) Unfilled track colour not exposed as dashboard theme variable.\n   This means that rgba(111,111,111,1) is a tad too dark in both \n   dark and light themes. An acceptable compromise until a variable \n   is added to dashboard.\n   (3) Thumb fails to scale on focus - transform:scale(1) !important;\n   (4) Cannot get thumb to sit on top of grey part of slider that represents\n   the unfilled length of track.\n   (5) Have not figured out how to push v1 with v2 and\n   push v2 with v1 unsing just CSS ?\n   (6) An undesirable transform flicker when v2 is hovered.\n   (7) Could probably use a label.\n   Notes:\n   md-invert\n\n-->\n<style>\n    .nr-dashboard-template, .slider-v1{\n        font-family:Liberation;\n        padding: 0px;\n        overflow:visible;\n    }\n\n/* TODO`    fails to stay scaled*/\n.slider-v1:focus .md-focus-ring:focus,\n.slider-v2:focus .md-focus-ring:focus {\n    transform:scale(1) !important;\n}\n    /* ok */\n    .slider-v1:not(:focus) .md-focus-ring:hover,\n    .slider-v2:not(:focus) .md-focus-ring:hover {\n        transform:scale(0.8) !important;\n    }\n    .slider-v1 .md-focus-ring,\n    .slider-v2 .md-focus-ring {\n        top:14px;\n        left:-10px;\n        height:20px;\n        width:20px;\n        opacity:1;\n        z-index:9998;\n        background-color: var(--nr-dashboard-widgetColor) !important;\n    }\n    .slider-v1 .md-thumb, .slider-v2 .md-thumb,\n    .slider-v1 .md-thumb:after, .slider-v2 .md-thumb:after {\n        background-color: var(--nr-dashboard-widgetColor) !important;\n    }\n.slider-v1 .md-sign,\n.slider-v2 .md-sign {\n    height:16px !important;\n    width:25px !important;\n    background-color:var(--nr-dashboard-groupBackgroundColor);\n}\n/* v1 .md-sign */\n    md-slider[md-discrete]:not([disabled]):not(.slider-v2):focus .md-sign,\n    md-slider[md-discrete]:not([disabled]):not(.slider-v2):hover .md-sign,\n    md-slider[md-discrete]:not([disabled]):not(.slider-v2):active .md-sign {\n        opacity:1;\n        -webkit-transform: translate3d(1px, 10px, 0) scale(1) !important;\n        transform: translate3d(1px, 10px, 0) scale(1) !important;\n        background-color:var(--nr-dashboard-widgetColor);\n    }\n    md-slider[md-discrete]:not([disabled]):not(.slider-v2):not(:hover) .md-sign,\n    md-slider[md-discrete]:not(.slider-v2) .md-sign {\n/*        opacity:1;*/\n        -webkit-transform: translate3d(1px, 20px, 0) scale(1) !important;\n        transform: translate3d(1px, 20px, 0) scale(1) !important;\n    }\n/* v1 .md-sign:after */\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:after,\n    md-slider[md-discrete]:not([disabled]):not(.slider-v2):active .md-sign:after {\n        opacity:1;\n        -webkit-transform: translate3d(-1px, -11px, 0) scale(1) !important;\n        transform: translate3d(-1px, -11px, 0) scale(1) !important;\n        border-top-color:var(--nr-dashboard-widgetColor);\n        color:var(--nr-dashboard-widgetColor);\n    }\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:after {\n        opacity:0;\n        -webkit-transform: translate3d(-1px, -11px, 0) scale(1) !important;\n        transform: translate3d(-1px, -11px, 0) scale(1) !important;\n    }\n/* v2 .md-sign */\n    md-slider[md-discrete]:not([disabled]):not(.slider-v1):focus .md-sign,\n    md-slider[md-discrete]:not([disabled]):not(.slider-v1):hover .md-sign,\n    md-slider[md-discrete]:not([disabled]):not(.slider-v1):active .md-sign {\n        opacity:1;\n        -webkit-transform: translate3d(1px, 55px, 0) scale(1);\n        transform: translate3d(1px, 55px, 0) scale(1);\n        background-color:var(--nr-dashboard-widgetColor);\n    }\n    md-slider[md-discrete]:not([disabled]):not(.slider-v1):not(:hover) .md-sign,\n    md-slider[md-discrete]:not(.slider-v1) .md-sign {\n/*        opacity:1;*/\n        -webkit-transform: translate3d(1px, 46px, 0) scale(1);\n        transform: translate3d(1px, 46px, 0) scale(1);\n    }\n/* v2 .md-sign:after */\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:after,\n    md-slider[md-discrete]:not([disabled]):not(.slider-v1):active .md-sign:after {\n        opacity:1;\n        -webkit-transform: translate3d(-1px, -26px, 0) scale(1);\n        transform: translate3d(-1px, -26px, 0) scale(1);\n        border-top-color:var(--nr-dashboard-widgetColor);\n        border-bottom-color:var(--nr-dashboard-widgetColor);\n        border-top-width:0px;\n        border-bottom-width:14px;\n        border-bottom-style:solid;\n        color: var(--nr-dashboard-widgetColor);\n    }\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:after {\n        opacity:0;\n        -webkit-transform: translate3d(-1px, -26px, 0) scale(1);\n        transform: translate3d(-1px, -26px, 0) scale(1);\n    }\n    /* Show sign when min value */\n    .slider-v1:not(:hover) .md-sign,\n    .slider-v2:not(:hover) .md-sign {\n        background-color:var(--nr-dashboard-groupBackgroundColor) !important;\n        opacity:1 !important;\n    }    \n    .slider-v1 .md-thumb-text,\n    .slider-v2 .md-thumb-text {\n        opacity:1;\n        color: var(--nr-dashboard-widgetTextColor) !important;\n    }\n    .slider-v1:hover .md-thumb-text,\n    .slider-v2:hover .md-thumb-text {\n        filter: contrast(1);\n    }\n    .slider-wrapper-v1{\n        height: 50%;\n    }\n    .slider-wrapper-v2 {\n        position: absolute !important;\n        top:0px !important;\n        height: 50%;\n    }\n    .slider-v2 .md-track-ticks {\n        opacity:0 !important;\n    }\n    .slider-v1 .md-track-fill {\n        z-index:9996 !important;\n        background-color: var(--nr-dashboard-widgetColor) !important;\n    }\n    .slider-v2 .md-track-fill {\n        z-index:9996 !important;\n    }\n    .slider-v1, .slider-v2 {\n        margin: 0px;\n        padding-left:10px;\n        padding-right:10px;\n    }\n    .slider-v1 {\n        top:-webkit-calc(100% - min(100%,48px));\n        top:calc(100% - min(100%,48px));\n    }\n    .slider-v1 .md-slider-content {\n        top:-webkit-calc(100% - 24px);\n        top:calc(100% - 24px);\n        }\n    .slider-v2 .md-slider-content {\n        top: -24px;\n    }\n    \n    .slider-v2 .md-track {\n        background-color:rgba(111,111,111,1) !important;\n    }\n</style>\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"global","x":130,"y":40,"wires":[[]]},{"id":"a67b28eb.f00ac8","type":"debug","z":"bd6a122b.f50f6","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":110,"y":80,"wires":[]},{"id":"b888dbed.70e238","type":"ui_template","z":"bd6a122b.f50f6","group":"bb12aba1.d14278","name":"Range","order":9,"width":4,"height":"1","format":"<!--\n   TODO: see CSS.\n   \n   Range Slider         Requires: rangeSlider-CSS\n   ============         =========================\n   \n   Outputs {v1: nn.n, v2: nn.n} on mouse up.\n   \n   Currently set to:\n    min 15, max 30, step 0.1\n   \n   This is a discrete range slider made from two single overlapping thumb md-sliders\n   The focus dividing line is on each side of the track.\n   \n   Untested: 90 Deg. rotation.\n   \n   Fits in 48px high space.\n-->\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<div class=\"slider-wrapper-v1;\" \n    style=\"height:50%; width:100%;max-width:100%;\">\n    <md-slider thumbLabel md-sign md-thumb-text \n        style=\"max-width:100%; width:100%;\" \n        md-discrete=\"\"\n        md-disabled-thumb=\"false\"\n        aria-label = \"msg.payload.v1\" \n        ng-model=\"msg.payload.v1\" \n        ng-change=\"send(msg)\" \n        flex=\"20\" min=\"15\" max=\"30\" step=\"0.1\"\n        class=\"slider-v1 ng-pristine ng-untouched ng-valid ng-isolate-scope ng-empty\">\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\" \n                    style=\"width: 55%;\">55</div>\n                <div class=\"md-track-ticks\">\n                    <canvas style=\"position:absolute;\" width=\"100%\" height=\"5px\"></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=\"height:50%; width:100%;max-width:100%;\">\n    <md-slider thumbLabel md-sign md-thumb-text \n        style=\"max-width:100%; width:100%;\"\n        md-discrete=\"\"\n        md-disabled-thumb=\"false\"\n        aria-label = \"msg.payload.v2\" \n        ng-model=\"msg.payload.v2\" \n        ng-change=\"send(msg)\" \n        flex=\"20\" min=\"15\" max=\"30\" step=\"0.1\"\n        class=\"slider-v2 ng-pristine ng-untouched ng-valid ng-isolate-scope ng-empty\">\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\" \n                    style=\"width: 55%;\">55</div>\n                <div class=\"md-track-ticks\">\n                    <canvas style=\"position:absolute;\" width=\"100%\" height=\"5px\"></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","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":110,"y":120,"wires":[["a67b28eb.f00ac8"]]},{"id":"1da7c407.8ac8dc","type":"inject","z":"bd6a122b.f50f6","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"{\"v2\":19.2,\"v1\":23.5}","payloadType":"json","x":150,"y":160,"wires":[["b888dbed.70e238"]]},{"id":"bb12aba1.d14278","type":"ui_group","name":"Dashboard 2.26.1 - ui_template range slider","tab":"485a5637.1779c8","order":2,"disp":true,"width":"4","collapse":false},{"id":"485a5637.1779c8","type":"ui_tab","name":"Pad Port 1888","icon":"dashboard","order":2,"disabled":false,"hidden":false}]

Hover
image
Light theme
image

Unfortunately there is still a small snagging list and any help would be welcome.
TODO:
(1) DONE https://discourse.nodered.org/t/pi-7-touch-problem/38840 - General Pi touch screen problem - disable copy and select.
(2) Unfilled track colour not exposed as dashboard theme variable.
This means that rgba(111,111,111,1) is a tad too dark in both
dark and light themes. An acceptable compromise for now.
(3) Thumb fails to scale on focus - transform:scale(1) !important;
(4) Cannot get thumb to sit on top of grey part of slider that represents
the unfilled length of track.
(5) Have not figured out how to push v1 with v2 and
push v2 with v1 using just CSS ?
(6) An undesirable transform flicker when v2 is hovered.
(7) Could probably use a label.

Enjoy.

Thanks to @hotNipi (1) is fixed. Here is the CSS

[{"id":"2fada998.fa3f96","type":"ui_template","z":"b7f02da3.192c","group":"bb12aba1.d14278","name":"Range CSS","order":2,"width":4,"height":1,"format":"<!--\n    Range Slider\n    ============\n   \n    Outputs {v1: value, v2: value} on mouse up.\n   \n    Designed with 48px x 48px dashboard grid and seems to work\n    with widget heights greater than one.\n    This is a discrete range slider made from two single overlapping thumb md-sliders\n    The focus dividing line is on each side of the track.\n   \n   Untested: 90 Deg. rotation.\n   \n   Fits in 48px high space.    \n    \n   TODO: \n   (1) DONE https://discourse.nodered.org/t/pi-7-touch-problem/38840 - General Pi touch screen problem - disable copy and select.\n   (2) Unfilled track colour not exposed as dashboard theme variable.\n   This means that rgba(111,111,111,1) is a tad too dark in both \n   dark and light themes. An acceptable compromise for now.\n   (3) Thumb fails to scale on focus - transform:scale(1) !important;\n   (4) Cannot get thumb to sit on top of grey part of slider that represents\n   the unfilled length of track.\n   (5) Have not figured out how to push v1 with v2 and\n   push v2 with v1 unsing just CSS ?\n   (6) An undesirable transform flicker when v2 is hovered.\n   (7) Could probably use a label.\n   Notes:\n   md-invert\n\n-->\n<style>\n    .nr-dashboard-template, .slider-v1{\n        font-family:Liberation;\n        padding: 0px;\n        overflow:visible;\n        -webkit-user-select: none; /* Safari */\n        -ms-user-select: none; /* IE 10 and IE 11 */\n        user-select: none; /* Standard syntax */\n    }\n\n/* TODO`    fails to stay scaled*/\n.slider-v1:focus .md-focus-ring:focus,\n.slider-v2:focus .md-focus-ring:focus {\n    transform:scale(1) !important;\n}\n    /* ok */\n    .slider-v1:not(:focus) .md-focus-ring:hover,\n    .slider-v2:not(:focus) .md-focus-ring:hover {\n        transform:scale(0.8) !important;\n    }\n    .slider-v1 .md-focus-ring,\n    .slider-v2 .md-focus-ring {\n        top:14px;\n        left:-10px;\n        height:20px;\n        width:20px;\n        opacity:1;\n        z-index:9998;\n        background-color: var(--nr-dashboard-widgetColor) !important;\n    }\n    .slider-v1 .md-thumb, .slider-v2 .md-thumb,\n    .slider-v1 .md-thumb:after, .slider-v2 .md-thumb:after {\n        background-color: var(--nr-dashboard-widgetColor) !important;\n    }\n.slider-v1 .md-sign,\n.slider-v2 .md-sign {\n    height:16px !important;\n    width:25px !important;\n    background-color:var(--nr-dashboard-groupBackgroundColor);\n}\n/* v1 .md-sign */\n    md-slider[md-discrete]:not([disabled]):not(.slider-v2):focus .md-sign,\n    md-slider[md-discrete]:not([disabled]):not(.slider-v2):hover .md-sign,\n    md-slider[md-discrete]:not([disabled]):not(.slider-v2):active .md-sign {\n        opacity:1;\n        -webkit-transform: translate3d(1px, 10px, 0) scale(1) !important;\n        transform: translate3d(1px, 10px, 0) scale(1) !important;\n        background-color:var(--nr-dashboard-widgetColor);\n    }\n    md-slider[md-discrete]:not([disabled]):not(.slider-v2):not(:hover) .md-sign,\n    md-slider[md-discrete]:not(.slider-v2) .md-sign {\n/*        opacity:1;*/\n        -webkit-transform: translate3d(1px, 20px, 0) scale(1) !important;\n        transform: translate3d(1px, 20px, 0) scale(1) !important;\n    }\n/* v1 .md-sign:after */\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:after,\n    md-slider[md-discrete]:not([disabled]):not(.slider-v2):active .md-sign:after {\n        opacity:1;\n        -webkit-transform: translate3d(-1px, -11px, 0) scale(1) !important;\n        transform: translate3d(-1px, -11px, 0) scale(1) !important;\n        border-top-color:var(--nr-dashboard-widgetColor);\n        color:var(--nr-dashboard-widgetColor);\n    }\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:after {\n        opacity:0;\n        -webkit-transform: translate3d(-1px, -11px, 0) scale(1) !important;\n        transform: translate3d(-1px, -11px, 0) scale(1) !important;\n    }\n/* v2 .md-sign */\n    md-slider[md-discrete]:not([disabled]):not(.slider-v1):focus .md-sign,\n    md-slider[md-discrete]:not([disabled]):not(.slider-v1):hover .md-sign,\n    md-slider[md-discrete]:not([disabled]):not(.slider-v1):active .md-sign {\n        opacity:1;\n        -webkit-transform: translate3d(1px, 55px, 0) scale(1);\n        transform: translate3d(1px, 55px, 0) scale(1);\n        background-color:var(--nr-dashboard-widgetColor);\n    }\n    md-slider[md-discrete]:not([disabled]):not(.slider-v1):not(:hover) .md-sign,\n    md-slider[md-discrete]:not(.slider-v1) .md-sign {\n/*        opacity:1;*/\n        -webkit-transform: translate3d(1px, 46px, 0) scale(1);\n        transform: translate3d(1px, 46px, 0) scale(1);\n    }\n/* v2 .md-sign:after */\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:after,\n    md-slider[md-discrete]:not([disabled]):not(.slider-v1):active .md-sign:after {\n        opacity:1;\n        -webkit-transform: translate3d(-1px, -26px, 0) scale(1);\n        transform: translate3d(-1px, -26px, 0) scale(1);\n        border-top-color:var(--nr-dashboard-widgetColor);\n        border-bottom-color:var(--nr-dashboard-widgetColor);\n        border-top-width:0px;\n        border-bottom-width:14px;\n        border-bottom-style:solid;\n        color: var(--nr-dashboard-widgetColor);\n    }\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:after {\n        opacity:0;\n        -webkit-transform: translate3d(-1px, -26px, 0) scale(1);\n        transform: translate3d(-1px, -26px, 0) scale(1);\n    }\n    /* Show sign when min value */\n    .slider-v1:not(:hover) .md-sign,\n    .slider-v2:not(:hover) .md-sign {\n        background-color:var(--nr-dashboard-groupBackgroundColor) !important;\n        opacity:1 !important;\n    }    \n    .slider-v1 .md-thumb-text,\n    .slider-v2 .md-thumb-text {\n        opacity:1;\n        color: var(--nr-dashboard-widgetTextColor) !important;\n    }\n    .slider-v1:hover .md-thumb-text,\n    .slider-v2:hover .md-thumb-text {\n        filter: contrast(1);\n    }\n    .slider-wrapper-v1{\n        height: 50%;\n    }\n    .slider-wrapper-v2 {\n        position: absolute !important;\n        top:0px !important;\n        height: 50%;\n    }\n    .slider-v2 .md-track-ticks {\n        opacity:0 !important;\n    }\n    .slider-v1 .md-track-fill {\n        z-index:9996 !important;\n        background-color: var(--nr-dashboard-widgetColor) !important;\n    }\n    .slider-v2 .md-track-fill {\n        z-index:9996 !important;\n    }\n    .slider-v1, .slider-v2 {\n        margin: 0px;\n        padding-left:10px;\n        padding-right:10px;\n    }\n    .slider-v1 {\n        top:-webkit-calc(100% - min(100%,48px));\n        top:calc(100% - min(100%,48px));\n    }\n    .slider-v1 .md-slider-content {\n        top:-webkit-calc(100% - 24px);\n        top:calc(100% - 24px);\n        }\n    .slider-v2 .md-slider-content {\n        top: -24px;\n    }\n    \n    .slider-v2 .md-track {\n        background-color:rgba(111,111,111,1) !important;\n    }\n</style>\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"global","x":150,"y":60,"wires":[[]]},{"id":"bb12aba1.d14278","type":"ui_group","name":"ui_template range slider","tab":"485a5637.1779c8","order":2,"disp":true,"width":"4","collapse":false},{"id":"485a5637.1779c8","type":"ui_tab","name":"Pad Port 1999","icon":"dashboard","order":2,"disabled":false,"hidden":false}]
14

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.