<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>
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}]
