bug(slider): Using a slider with a formControl breaks change detection

[amakhrov]

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

I have a widget that uses mat-slider. This widget takes a value as an input and sets it to the form control bound to the slider:

// template
<mat-slider>
  <input matSliderThumb [formControl]="sliderValue">
</>

// component
@Input() value: number

sliderValue = new FormControl(0, {nonNullable: true})

ngOnChanges() {
  this.sliderValue.setValue(this.value) // <-- this

  // derived value used in the template
  this.isDefaultValue = this.value === 0
}

Looks like the .setValue call breaks change detection. The isDefaultValue value is properly derived (as per console.log output), but is not reflected in HTML. It will get updated after the next interaction with the widget (which triggers change detection), or after manually calling changeDetectorRef.detectChanges().

This happens with a single-handle or a two-handle slider.

It only happens when the value is bound to the slider via a form control. If I pass the value as a property binding instead ([value]="sliderValue.value"), everything works fine.
Also moving the isDefaultValue calculation up to be before the .setValue call magically solves it, too.

Reproduction

StackBlitz link: https://stackblitz.com/edit/xsoedg?file=src%2Fexample%2Fapp-widget.component.ts

1. Click the "set to 2" button

Expected Behavior

• Slider value is printed as "2"
• Slider default state is printed as "false"
• The slider turns blue

Actual Behavior

• Slider value is printed as "2" (correct)
• Slider default state is printed as "true" (incorrect)
• The slider remains gray (incorrect)

Environment

• Angular: 16
• CDK/Material: 16
• Browser(s): Firefox, Chrome
• Operating System (e.g. Windows, macOS, Ubuntu): macOS

[wagnermaciel]

After taking a closer look at this, I've found that this is not an issue. The mat-slider's change detection is running correctly, it's the wrapper component that is not getting change detection run when it needs to. That is why moving the isDefaultValue calculation up before calling setValue fixes the issue - it is getting caught in that round of change detection. This is expected for components using ChangeDetectionStrategy.OnPush - it's up to the component to manage it's own change detection, etc.

[amakhrov]

@wagnermaciel could you please clarify what you mean?
just removing the formControl binding from the template makes everything work well

[amakhrov]

Furthermore, replacing mat-slider with a text input, keeping the same fomrControl binding, also solve the CD issue.

So whatever it is, it is specific to the slider

[wagnermaciel]

Ah interesting. I didn't notice the native input was behaving differently or that the form control binding would change whether the parent component's cdr was running. I have an idea why this is happening and will try to create a fix today