angular / angular/components

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

Open
#29,496 3 comments 0 reactions 0 assignees View on GitHub
area: material/slider P3
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
91

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

``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
``


``

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](https://github.com/angular/components/issues/url)
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

Contributor guide

Open the contributing guide

Research direction

Start with the StackBlitz files src/example/slider-range-example.ts, src/example/slider-range-example.html, and src/example/slider-range-example.css, then compare them with the reported slider.html and slider.ts setup. Reproduce an API callback that updates min and max while showTickMarks is enabled; done means the app remains responsive and the range slider updates correctly.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.