bug(mat-slider): Max value not updating correctly when new value is 0

[YSFKBDY]

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 am changing slider's max value in my component while/after doing some works. And it seems it has a problem updating visually when new max value is 0.

Reproduction

Steps to reproduce:

1. Define slider like this: <mat-slider min="0" [displayWith]="displayValue" [max]="maxValue" step="1" [thumbLabel]="true" [tickInterval]="1" [(ngModel)]="sliderValue" (ngModelChange)="changeSliderValue()"></mat-slider>
2. Default sliderValue is 0, maxValue is 0.
3. Click a button and change maxValue - let's say to 6. Updates slider and ticks correctly.
4. Click another button and change maxValue to 0. Updates slider and ticks incorrectly, shows previous ticks.
5. You can see the same bug here: https://material.angular.io/components/slider/examples

Expected Behavior

Updating slider and ticks correctly.

Actual Behavior

Updated slider and ticks incorrectly.

Environment

• Angular: 10.2.0
• CDK/Material: 11.0.2
• Browser(s): Chome
• Operating System (e.g. Windows, macOS, Ubuntu): Windows 10 x64

[jelbourn]

Confirmed that the ticks do not update after setting the max to zero. This actually happens both in the current and MDC-based slider (which is impressive because they're completely different implementations).

[DMezhenskyi]

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

[jelbourn]

@DMezhenskyi Feel free to send a PR

[lukonik]

@DMezhenskyi PLZ Let me know, if you are still going to work on this issue and I'll close my PR :)

[lukonik]

Apologize for so many closed PRs had some troubles with source control.

[DMezhenskyi]

@DMezhenskyi PLZ Let me know, if you are still going to work on this issue and I'll close my PR :)

Hi @lukonik! If this fix is urgent then I do not mind if your solution eventually will be merged. My fix is ready, however, I can deliver my PR in about 3 weeks when I get back from vacation.

P.s from what I remember in my solution, besides the case you covered in your PR, there is also a method _updateTickIntervalPercent where happens division by zero if min and max values are the same. If it happens, the result of the calculation will be “Infinity” which is not a valid CSS value for the tick’s background-size property, so it is also a cause of wrongly repainted ticks.

[lukonik]

@DMezhenskyi PLZ Let me know, if you are still going to work on this issue and I'll close my PR :)

Hi @lukonik! If this fix is urgent then I do not mind if your solution eventually will be merged. My fix is ready, however, I can deliver my PR in about 3 weeks when I get back from vacation.

P.s from what I remember in my solution, besides the case you covered in your PR, there is also a method _updateTickIntervalPercent where happens division by zero if min and max values are the same. If it happens, the result of the calculation will be “Infinity” which is not a valid CSS value for the tick’s background-size property, so it is also a cause of wrongly repainted ticks.

Hey, thx for your reply.
it's not urgent at all, for me at least :). I'll close my PR then and feel free to push your one .

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}