angular / angular/components

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

Abierto
#33,606 1 comentario 0 reacciones 0 asignados Ver en GitHub
area: material/slider feature P3
Lenguaje dominante
TypeScript
Estrellas
25k
Forks
6.8k
Merge medio
1 d 8 h
PR fusionados (30 d)
91

Descripción

### 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.

Guía de contribución

Abrir la guía de contribución

Línea de trabajo

Comienza con el componente Slider y los sliders de ejemplo de la documentación enlazada en el issue, reproduciendo el desbordamiento con valores de cuatro dígitos y un año. Compara el comportamiento de thumb-label con la referencia de sliders de Material Design; el trabajo estará terminado cuando los valores más largos se muestren correctamente sin desbordarse y los ejemplos documentados sigan siendo utilizables.

Escrito por el modelo de indexación a partir del texto del issue.

Evaluación

Stack tecnológico
angular, typescript
Área
design, frontend
Tipo de issue
Nueva funcionalidad
Dificultad
3/5
Tiempo estimado
1-2 días
Estado de actividad
Tranquilo
Claridad
Bastante claro
Aptitud para principiantes
55/100

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.