user4401 user4401 - 2 months ago 40x
AngularJS Question

OnChange callback for md-slider in Angular Material Design

How can I know in controller that the value of < md-slider > from Angular Material Design has changed?


I didn't find how to do it in a proper way, but you can do it by creating a directive and an event, like:

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

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

I hope it helps.

In Angular Material's git hub there are few other events where you can do the same:

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