bug(MatSlider): Inconsistent Reset Behavior for mat-slider with Range Thumbs in Reactive Forms

[kenyerman]

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 mat-slider with range thumbs (start and end thumbs) in a reactive form, resetting the form sets the control values to null. This results in:

1. The thumbs repositioning to slice the range into equal parts, despite their values being null.
2. A conflict with the initialization logic, where null values correctly position the thumbs at the range’s endpoints.

Investigation

• On reset, the slider attempts to divide the range into equal sections.
• This behavior works fine for single-thumb sliders, but for range sliders, it introduces rounding errors (since the range is divided by 3, which becomes worse as the value of steps gets closer to 0).
• As a result, multiple resets can produce different thumb positions, making the behavior inconsistent:
  • Inconsistent with initialization (where null places thumbs at the ends).
  • Inconsistent with itself (due to rounding errors).

Reproduction

StackBlitz link: https://stackblitz.com/edit/components-issue-starter-ak9ciyht?file=src%2Fmain.ts
Steps to reproduce:

1. Click on reset button
2. Notice the thumbs are trying to slice the range into 3 parts
3. Click on reset button
4. Notice the thumbs are getting into different positions

Expected Behavior

When resetting the form, the thumbs should match the initialization logic:

• If the control values are null, both thumbs should be placed at the range’s endpoints.
• The reset behavior should be consistent and predictable.

Actual Behavior

Instead of moving to the endpoints, the thumbs attempt to slice the range into equal parts, leading to:

• Inconsistency with initialization (null values initially place thumbs at the range’s ends).
• Rounding errors when dividing the range, causing the reset position to change across multiple resets.

Environment

Angular CLI: 18.2.8
Node: 18.20.3
Package Manager: npm 10.2.3
OS: linux x64

Angular: 18.2.8
... animations, cdk, cli, common, compiler, compiler-cli, core
... forms, material, platform-browser, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1802.9
@angular-devkit/build-angular   18.2.9
@angular-devkit/core            18.2.9
@angular-devkit/schematics      18.2.8
@schematics/angular             18.2.8
rxjs                            7.8.1
typescript                      5.5.4
zone.js                         0.14.10

[mistrykaran91]

Hi! Is anybody working on it? Otherwise, I could try to fix it if you don't mind.