Md-slider, how to know when it was finished?

Question

I have this slider:

<md-slider step="5" min="15" max="120" ng-model="tempo" aria-label="red" id="red-slider" class="">
</md-slider>

I could not find a legal way to know when the user changes the slider, I worked this way:

$scope.tempo = 25;
$scope.tempo_final = '15 Min';

$scope.$watch(
    function(tempo) {
        console.log($scope.tempo);
    }
);  

But the return of this function is not interesting, even more that I will throw this value in bank, so would have some way to know when this slider is amended?

Use the Angularjs v1.3.15 if you specify another version for this method, I can change.

Answer 1

I’ve never tested with Angular Material, but if the logic is the same, you can use a ng-blur or ng-change. Both perform a function after user interaction with the field.

The difference is that the ng-blur is executed after an interaction with the field and the ng-change is executed when the field value is modified. Both can call a function within your controller, as follows:

<md-slider step="5" min="15" max="120" ng-model="tempo" aria-label="red" id="red-slider" class="" ng-blur="minhaFunc(tempo)">
</md-slider>

or

<md-slider step="5" min="15" max="120" ng-model="tempo" aria-label="red" id="red-slider" class="" ng-change="minhaFunc(tempo)">
</md-slider>

And on your controller:

$scope.minhaFunc = function(tempo) {
    console.log(tempo);
};

I hope it helps.

Edited:

Take a look at this codepen that extracts directly from Angularmaterial and just added the function of ng-change, it worked normally. http://codepen.io/anon/pen/gPbzRV

Change the slider and see what new value will be written on top of it.