bug(MatSlider): "showTickMarks" cash if updating mat-slider from api callback

[chiLinh0412]

trafficstars

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 have problem with Range slider when i need to get min, max from an API call. The console show no error but my app just freeze completely. If i remove [showTickMarks], problem solved !

slider.html <mat-slider class="filter-slider" [min]="this.soldeMin" [max]="this.soldeMax" [discrete]="true" [showTickMarks]="true"> <input matSliderStartThumb [(ngModel)]="filterSoldeMin"> <input matSliderEndThumb [(ngModel)]="filterSoldeMax"> </mat-slider>

slider.ts `` soldeMin: number = 0; soldeMax: number = 3000;

ngOnInit(): void {
    this.api.get().subscribe(res => {
        this.soldeMin = res.solde_min;
        this.soldeMax = res.solde_max;
    })
}

``

Reproduction

StackBlitz link: https://stackblitz.com/edit/qifxvd?file=src%2Fexample%2Fslider-range-example.ts,src%2Fexample%2Fslider-range-example.html,src%2Fexample%2Fslider-range-example.css Steps to reproduce: 1. 2.

Expected Behavior

App not freeze

Actual Behavior

App freeze

Environment

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

[mmalerba]

Please provide a reproduction to help us investigate

[chiLinh0412]

Hello @mmalerba,

After testing, i found out the problem come from "showTickMarks" when the "max" value is too big ( ~ 50000).

https://stackblitz.com/edit/qifxvd?file=src%2Fexample%2Fslider-range-example.ts

[crisbeto]

I suspect the issue is that each tick mark is rendered out as a DOM node.