OnChange callback for md-slider in Angular Material design

Question

How can I find out in the controller that the <md-slider> value from Angular Is the material design changed?

Answer 1

I did not find how to do it right, but you can do it by creating a directive and an event, for example:

.directive('testDragEnd', function() { return { restrict: 'A', link: function(scope, element, attrs) { element.on('$md.dragend', function() { console.info('Drag Ended'); }) } } }) 

And you need to add the directive in <md-slider>. (<md-slider test-drag-end></md-slider>). <md-slider>. (<md-slider test-drag-end></md-slider>).

Hope this helps.

There are several other events in the Angular git package where you can do the same:

https://github.com/angular/material/blob/952ee3489e84226c73f83db15f8586db93cdca19/src/components/slider/slider.js

 element .on('keydown', keydownListener) .on('$md.pressdown', onPressDown) .on('$md.pressup', onPressUp) .on('$md.dragstart', onDragStart) .on('$md.drag', onDrag) .on('$md.dragend', onDragEnd); 

Answer 2

you can add ng-change to the directive

 <md-slider min="0" max="50" ng-model="text" ng-change="myMethod()" md-discrete></md-slider> 

Answer 3

I used $ watch for a variable bound to a slider:

 $scope.$watch( function() { return $scope.tex; }, function(newValue, oldValue) { $mdToast.show($mdToast.simple().content("Slider=" + newValue).position("top right").hideDelay(1500)); }); 

In my case, my HTML looked like this:

 <md-slider min="0" max="50" ng-model="tex" md-discrete></md-slider> 

Good luck.

Answer 4

I put the callback function in ng-blur , which worked for me. (At first I tried ng-change , but it became very slow).

Example:

 <md-slider ng-model="gigabyte" ng-blur="myCallbackFunction()" id="myslider"> </md-slider> <input flex type="number" ng-model="gigabyte" ng-blur="myCallbackFunction()" aria-controls="myslider"> 

Answer 5

ng-mouseup should do the trick. If you want to add logic (like me) to make sure your value has changed before making your db call updated, you can add this inside your saveChanges() function inside your controller.

<md-slider ng-mouseup="vm.saveChanges(vm.myModel)"></md-slider>