Mat0-Slider ngModel not working angular 5

Question

I am trying to implement the mat slider from angular material (angular 5) everything works well except ngModel does not change when I slide the slider, here is the code

<li class=normal *ngFor="let f of filters" attr.data-default={{f.default}}>
    <div>
        <small>
            {{f.name}}
        </small>
    </div>
    <mat-slider step="{{f.step}}" min='{{f.min}}' max={{f.max}} [(ngModel)]='effects[f.function]' [value]=f.default (input)="pictureManip($event, f.function, 0)" [id]=f.name></mat-slider>

for the typescript function, I did something basic ex

effects = [
    0,0, 0, 1, false, false
];
...
pictureManip($event, code, level){
    console.log(this.effects[code]);
}

The output is always 0... I do not understand, when I check with the others (checkbox), the ngModel gets updated to true / false but not for the slider, always 0...

Answer 1

The input event tells you what is happening with the slider thumb position. That is not the value of the slider's model. The change event gives you the changes in the slider's model value.

    (change)="pictureManip($event, f.function, 0)"