Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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:

Define slider like this: <mat-slider min="0" [displayWith]="displayValue" [max]="maxValue" step="1" [thumbLabel]="true" [tickInterval]="1" [(ngModel)]="sliderValue" (ngModelChange)="changeSliderValue()"></mat-slider>
Default sliderValue is 0, maxValue is 0.
Click a button and change maxValue - let’s say to 6. Updates slider and ticks correctly.
Click another button and change maxValue to 0. Updates slider and ticks incorrectly, shows previous ticks.
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

Issue Analytics

State:
Created 2 years ago
Comments:8 (4 by maintainers)

Top GitHub Comments

1reaction

lukonikcommented, Dec 28, 2021

@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 .

1reaction

jelbourncommented, Dec 9, 2021

@DMezhenskyi Feel free to send a PR