angular / angular/components

feat(material/slider): Support for multi word thumb label text

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

Description

### Feature Description

In mat slider thumb label, need a support for multi word text. As we can format thumb label text by using **displayWith** property and add suffix or prefix to the number. We have a use case in which using value from mat-slider, we are creating labels like poor, below average, above average, etc. But in current implementation multi word label text is not supported. Words gets wrapped as we give space in the label text string.
![mat-slider-thumb-text](https://github.com/angular/components/assets/101663998/4a079ed4-3256-4a80-99a0-9fc1f6efc975)

### Use Case

We have used mat slider of range {min=0, max=10, step=01} for taking ratings from user
by using the mat slider value I am creating rating labels such as poor, below average, average, above average and excellent. As per the number I want to show that particular label in thumb label text.

[Stackblitz link](https://stackblitz.com/edit/sxcf47?file=src%2Fapp%2Fslider-formatting-example.html,src%2Fapp%2Fslider-formatting-example.css,src%2Findex.html,src%2Fstyles.scss,src%2Fapp%2Fslider-formatting-example.ts,package.json)

Contributor guide

Open the contributing guide

Research direction

Start with the linked StackBlitz example, especially src/app/slider-formatting-example.html, src/app/slider-formatting-example.css, and src/app/slider-formatting-example.ts, to reproduce the formatted thumb label. Trace the Angular Material slider thumb-label implementation and make multi-word displayWith text remain on one label; done means labels such as “below average” render without wrapping.

Written by the indexing model from the issue text.

Assessment

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.