MatSlider: change event fired twice

[PhilippS93]

Bug:

MatSlider change event is fired twice when slider knob is dragged and released. Surprisingly enough, this happens only sometimes.

What is the expected behavior?

Event emitted when the slider value has changed.

What is the current behavior?

MatSlider change event is fired twice when slider knob is dragged and released.

What are the steps to reproduce?

See: stackblitz

What is the use-case or motivation for changing an existing behavior?

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Is there anything else we should know?

[manklu]

It fires immediately if you don't click exactly in the center of the knob.

[crisbeto]

It probably because we change the value on mousedown and then while the user is dragging. This sounds like it's working as expected.

[cmedinadeveloper]

This is happening to me on every single iOS devices, any suggestions?

[notbenj]

It probably because we change the value on mousedown and then while the user is dragging. This sounds like it's working as expected.

I'm sure an end-user doesn't expect the value to be changed, just because he/she grabbed the knob 1 pixel on the left of the knob center :)

I think the behavior should be on the mouseup event, to avoid this situation.

[crisbeto]

The problem, if we were to do that, is that the events will no longer be in sync with what is being rendered on screen.

[Domvel]

Confirmed, it's an unexpected behavior (bug).
https://stackblitz.com/edit/angular-mat-slider-full-options?embed=1&file=app/slider-configurable-example.html

If you click on the thumb if the slider is not focused an begin to drag the change event is emitted.
Also if you slick on the range (line, not the thumb) the change event is always fired on mouse button down. And final on pointer (mouse / touch) up (as expected).

Whatever the component does for internal reasons, the output interface "(change)" should only be fired once on pointer up. You can keep change detection on pointer down internal for the component. But not for the output change.

@crisbeto It's only about the output event of the component. You can do anything internal. Inside the component you can use mouse down whatever to render the current value. BUT the interface output (change) event should only be fired once. You could split the output event value with a internal value and only emit the value for output on mouse up / pointer up / etc.

[Domvel]

Here's the current behavior.

You see that the change event is fired when the user just press the mouse button down to begin dragging. This is an unexpected behavior. (bug) It's expected on mouse button up.
The yellow circle indicates the pressed mouse button.

[Domvel]

Workaround:
Use the event slideend.

<mat-slider
  #mySlider
  (slideend)="sliderOnChange(mySlider.value)"
></mat-slider>

This is the "real" (expected) "change"-event.
I use the same event like the slider does.
https://github.com/angular/material2/blob/7.3.5/src/lib/slider/slider.ts#L121

UPDATE:
Known issue: With (slideend) a simple click on the range-line of the slider does not fire the slideend until it has never been dragged. #2767
Alternative you can listen on the (mouseup) event or (pointerup). With these events you have to implement a change-detection.
You'll also have problem if your cursor is not overlapping the component on pointerup. Therefore you have to handle cancle events. And and and... Just fix this issue please 😄

UPDATE:
I found a solution for the slideend / pointerup issue. Just combine it with a simple change-detection.

<mat-slider
  #mySlider
  (slideend)="sliderOnChange(mySlider.value)"
  (pointerup)="sliderOnChange(mySlider.value)"
></mat-slider>

sliderOnChange(value: number) {
  if (this.mySliderValue !== value) {
    this.mySliderValue = value;
    console.log('changed: ', value);
  }
}

Ok, now it works. THIS is the "real" "change"-event as expected. But just a workaround.

[boar-is]

Well, the slideend event is not available now :(

[sksuri100]

Bug:

MatSlider change event is fired twice when slider knob is dragged and released. Surprisingly enough, this happens only sometimes.

What is the expected behavior?

Event emitted when the slider value has changed.

What is the current behavior?

MatSlider change event is fired twice when slider knob is dragged and released.

What are the steps to reproduce?

See: stackblitz

What is the use-case or motivation for changing an existing behavior?

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Is there anything else we should know?

i have faced same problem please let me know what is right solution of this bug????