Description
Is this a regression?
- Yes, this behavior used to work in the previous version
The previous version in which this bug was not present was
No response
Description
This is somewhat similar to an older issue with mat-checkbox (#22149)
I want to ensure that the range in the slider is always greater than zero. E.g. if the "end" value is currently 9, then a user can only move the "start" thumb as high as 8.
I'm enforcing it by subscribing to valueChanges of the form controls associated with the slider input elements.
this.start.valueChanges.subscribe(() => {
if (this.start.value >= this.end.value) {
this.start.setValue(this.end.value - 1, { emitEvent: false });
}
});
Even though the code above guarantees the form control values satisfy the constraint, the underlying DOM input element doesn't reflect the programmatic change from the setValue call.
A workaround I'm currently using is injecting the input elements (via @ViewChild) and setting its .value directly.
Reproduction
StackBlitz link: https://stackblitz.com/edit/benvwf-lmrtl4?file=src%2Fexample%2Fslider-range-example.ts
Steps to reproduce:
- Drag the "start" thumb all the way to the right
Expected Behavior
The "start" thumb stops at the "8" tick mark, never reaches the last "9".
Actual Behavior
- The "start" thumb goes up to the "end" position ("9").
- The form control value (printed above the slider) shows "8" - out of sync with the actual thumb state in the DOM
Environment
- Angular: 16
- CDK/Material: 16
- Browser(s): Firefox
- Operating System (e.g. Windows, macOS, Ubuntu): macOS