CODEWITHSUNDEEP
javascriptangulartypescriptangular-materialangular5
Joaquim Antonio Kapel
Joaquim Antonio Kapel

Reputation: 336

Mat0-Slider ngModel not working angular 5

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...

Upvotes: 6

Views: 3563

Answers (1)

G. Tranter
G. Tranter

Reputation: 17918

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)"

Upvotes: 3

Related Questions