-
Notifications
You must be signed in to change notification settings - Fork 6.8k
bug(MatSlider): Inconsistent Reset Behavior for mat-slider with Range Thumbs in Reactive Forms #30614
Copy link
Copy link
Closed
Labels
P3An issue that is relevant to core functions, but does not impede progress. Important, but not urgentAn issue that is relevant to core functions, but does not impede progress. Important, but not urgentarea: material/slider
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
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:
- The thumbs repositioning to slice the range into equal parts, despite their values being
null. - A conflict with the initialization logic, where
nullvalues 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
stepsgets closer to0). - As a result, multiple resets can produce different thumb positions, making the behavior inconsistent:
- Inconsistent with initialization (where
nullplaces thumbs at the ends). - Inconsistent with itself (due to rounding errors).
- Inconsistent with initialization (where
Reproduction
StackBlitz link: https://stackblitz.com/edit/components-issue-starter-ak9ciyht?file=src%2Fmain.ts
Steps to reproduce:
- Click on
resetbutton - Notice the thumbs are trying to slice the range into 3 parts
- Click on
resetbutton - 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 (
nullvalues 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
Reactions are currently unavailable
Metadata
Metadata
Assignees
Labels
P3An issue that is relevant to core functions, but does not impede progress. Important, but not urgentAn issue that is relevant to core functions, but does not impede progress. Important, but not urgentarea: material/slider