Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

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

Nadie ha tomado este issue todavía.

Evaluación

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

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.

Descripción

area: material/slider feature P3
Feature Description

The Slider component 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, 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.

Lenguaje dominante
TypeScript
Estrellas
25k
Forks
6.8k
Merge medio
1 d 2 h
PR fusionados (30 d)
80

Guía de contribución

Abrir la guía de contribución

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de angular/components

Todos los issues de angular/components

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.