docs-bug(mat-slider): thumbLabel unsupported

[dmauro13]

Documentation Feedback

Hi,

I recently upgraded from angular 13 to angular 18, and I noticed that since 16v mat-slider does not support the thumbLabel option.

In the documentation, it was present in version 14, then it disappeared.

Now I don't know what to replace it with, and in the documentation, there is no mention of this property disappearing. How can I replace it? And how can I make other components where it happens as well?

@input()
thumbLabel: boolean

<mat-slider
[(ngModel)]="_value"
[max]="_max"
[min]="_min"
[step]="_step"
[thumbLabel]="true"
color="primary" #ngSlider><input matSliderThumb (change)="onChange({source: ngSliderThumb, parent: ngSlider, value: ngSliderThumb.value})" #ngSliderThumb="matSliderThumb" />

Affected documentation page

https://v14.material.angular.io/components/slider/api

[hhaasbroek]

Hi, you can assign this one to me

[hhaasbroek]

I don't completely understand because the docs does reference thumblabel in its example
<mat-slider class="example-margin" [disabled]="disabled" [max]="max" [min]="min" [step]="step" [discrete]="thumbLabel" [showTickMarks]="showTicks"> <input matSliderThumb [(ngModel)]="value" #slider> </mat-slider>

here -> https://v18.material.angular.io/components/slider/examples

also references this

[dmauro13]

Thank you very much for the answer. (I dont' know why but i don't have permission to assign issues)

So what used to be an input parameter [thumbLabel] becomes [discrete]=“thumbLabel”?
My component is already matSliderThumb as in the v18 documentation example, but it is not shown.

Let's say my doubt is that the [thumbLabel] decorator has been deprecated since v14 but in the documentation there is no why and no alternative

[hhaasbroek]

I don't know if this really answers the question but I believe the recommended approach now involves setting the label property directly on the matSliderThumb component. This aligns with the current Material Slider implementation and ensures compatibility with future updates.
Something like this?
<mat-slider> <mat-slider-thumb label="My Label"></mat-slider-thumb> </mat-slider>

[dmauro13]

It works. Thank you!

[crisbeto]

It sounds like this is resolved so I'll close it. It can be reopened if there's anything actionable on our end.

[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.}