Change event triggered too quick from the mat-slider with Angular 7

Question

The problem appeared after upgrading to angular 7. If you click on the slider without releasing the click (mouseup), it still trigger and emit to the change event. How can I ignore that event? Sometime people will start dragging a few pixel beside the real center of the label and I want to prevent the change event at that moment.

 <mat-slider
    class="example-margin"
    [disabled]="disabled"
    [invert]="invert"
    [max]="max"
    [min]="min"
    [step]="step"
    (change)="change($event)"
    [thumbLabel]="thumbLabel"
    [tickInterval]="tickInterval"
    [(ngModel)]="value"
    [vertical]="vertical">
</mat-slider>

public change($event) {
    alert('trace');
    console.log($event);
    // need a way to ignore the first trigger if the slider is still being dragged
  }

Answer 1

I hope you've found a solution for this. In my case I forgot to import the BrowserAnimationsModule

After importing it the mat-slider was working as one would expect.

Answer 2

As a workaround you can use global mouse up event.

In the controller it would look something like this:

@ViewChild(MatSlider) slider: MatSlider;

@HostListener('window:mouseup', ['$event'])
mouseUp(event) {
  console.log(this.slider.value);
}

You need, of course, to import MatSlider:

import { MatSlider } from '@angular/material';

In the mouseUp() method you can add check if user actually started dragging slider by observing the flag, which is set in the (mousedown) event handler on the mat-slider control.