# Ui\_template md-slider help - workable, almost complete

**URL:** <https://discourse.nodered.org/t/ui-template-md-slider-help-workable-almost-complete/37328>\
**Category:** Dashboard\
**Created:** [10 December 2020 22:11 UTC](https://discourse.nodered.org/t/ui-template-md-slider-help-workable-almost-complete/37328 "2020-12-10T22:11:53Z")\
**Posts on this page:** 1\
**Showing post:** 2

<div class="post-metadata">

**Author:** ![ozpos](https://avatars.discourse-cdn.com/v4/letter/o/278dde/32.png) [@ozpos](https://discourse.nodered.org/u/ozpos)\
**Post date:** [12 December 2020 14:37 UTC](https://discourse.nodered.org/t/ui-template-md-slider-help-workable-almost-complete/37328/2 "2020-12-12T14:37:13Z")

</div>

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/5/65d64c393b4986560963d54e30bf83f8ad5738ce.png)  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/e/deefffeb644b1d1b69f3a5d9715fcb8b3b0384e2.png)

```auto
<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](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/c/6c85523361c95de57cbaece5d4c662db1db8a844.png)  
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 ?

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

```

---

_[View the full topic](https://discourse.nodered.org/t/ui-template-md-slider-help-workable-almost-complete/37328)._