angular / angular/components

feat(Slider): The Slider component should be able to properly display values with four or more digits

Offen
#33,606 1 Kommentar 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
area: material/slider feature P3
Vorherrschende Sprache
TypeScript
Sterne
25k
Forks
6.8k
Ø Merge
1 T. 8 Std.
Gemergte PRs (30 T.)
91

Beschreibung

### Feature Description

The [Slider component](https://material.angular.dev/components/slider/overview) cannot display values with four or more digits properly in the thumb label.

The issue can be quickly seen by sliding one of the example sliders in the documentation all the way up:

Image

At four digits, the text already overflows the container. A year looks even worse:

Image

While the custom thumb label formatting feature slightly helps with this, the limit for a slider that looks decent is just three-digit values.

Looking at [Material Design sliders](https://m3.material.io/components/sliders/overview), I can see that the thumb label is much wider, and it's easy to imagine it expanding horizontally to accomodate more text:

Image

The design of the Angular Material slider actually resembles the older M2 design with the smaller label:

Image

### Use Case

This will enable the slider to be used for a lot of common use cases like selecting a date range.

Beitragsleitfaden

Beitragsleitfaden öffnen

Rechercherichtung

Beginne mit der Slider-Komponente und den Beispiel-Slidern in der im Issue verlinkten Dokumentation und reproduziere den Überlauf mit vierstelligen Werten und einem Jahr. Vergleiche das Verhalten des thumb-label mit der Material-Design-Referenz für Slider; die Aufgabe ist erfüllt, wenn längere Werte sauber angezeigt werden, ohne überzulaufen, und die dokumentierten Beispiele weiterhin nutzbar sind.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
angular, typescript
Bereich
design, frontend
Issue-Typ
Feature
Schwierigkeit
3/5
Geschätzter Aufwand
1-2 Tage
Aktivitätsstatus
Ruhig
Klarheit
Größtenteils klar
Anfängerfreundlichkeit
55/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.