bug(Mat-Slider): [formField] directive does not work properly on material slider (matSliderStartThumb / matSliderEndThumb)

[SavvasPolydorou]

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

When using signal forms and the [formField] (or [field] in stackblitz) directive, this line below does not work properly:

<input matSliderStartThumb [field]="form.start_group_1" />

There is a weird "jump" effect happening, for example i slide to increase, but the slider moves back and it glitches out.

If I use the [value] and (valueChange) to set the value directly, this fixes it.

 <input 
        matSliderStartThumb 
        [value]="form.start_group_2().value()" 
        (valueChange)="form.start_group_2().value.set($event.toString())"
 />

This also works with the browser native events

<input
        matSliderStartThumb
        [value]="form.start_group_3().value()"
        (input)="form.start_group_3().value.set($event.toString())"
      />

Reproduction

StackBlitz link: https://stackblitz.com/edit/angular-21-base-bl1pabfb?file=src%2Fapp%2Fapp.component.html
Steps to reproduce:

1. Slide sliders
2. Notice that the field directive is not fully synced with the UI

Expected Behavior

The field / formField version should work like the rest two versions

Actual Behavior

You slide to increase, but the end slider moves back, same for the decrease start slider

Environment

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