md-slider, how do you know when it was finalized?

Question

md-slider, how do you know when it was finalized?

Navigation

#1 by (1 votes)

2

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 did not get a legal way to know when the user changes the slider, I worked like this:

$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'm going to throw this value into a bank, so would you have any way to tell when this slider changes?

I use AngularJS v1.3.15 if I indicate another version for this method, I can change it.

angularjs angular-module

asked by anonymous 08.12.2015 / 10:36

1 answer

Return Connection as Boolean? Store vector file contents in C

score 1 · Answer 1

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

The difference is that ng-blur is executed after an interaction with the field and ng-change is executed when the value of the field is modified. Both can call a function within its 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 in your controller:

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

Hope it helps.

Edited:

Take a look at this codepen that you extract directly from the AngularMaterial and just added the ng-change function, it worked normally. link

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