angular / angular/components

feat(slider): Allow users to manually set custom min & max values on slider thumbs

Ouverte
#27,208 7 commentaires 1 réaction 0 personnes assignées Voir sur GitHub
area: material/slider feature P3
Langage dominant
TypeScript
Étoiles
25k
Forks
6.8k
Merge moyen
1 j 8 h
PR mergées (30 j)
91

Description

### Is this a regression?

- [ ] Yes, this behavior used to work in the previous version

### The previous version in which this bug was not present was

_No response_

### Description

This is somewhat similar to an older issue with mat-checkbox (https://github.com/angular/components/issues/22149)

I want to ensure that the range in the slider is always greater than zero. E.g. if the "end" value is currently 9, then a user can only move the "start" thumb as high as 8.

I'm enforcing it by subscribing to `valueChanges` of the form controls associated with the slider input elements.

```
this.start.valueChanges.subscribe(() => {
if (this.start.value >= this.end.value) {
this.start.setValue(this.end.value - 1, { emitEvent: false });
}
});
```
Even though the code above guarantees the form control values satisfy the constraint, the underlying DOM `input` element doesn't reflect the programmatic change from the `setValue` call.

A workaround I'm currently using is injecting the `input` elements (via `@ViewChild`) and setting its `.value` directly.

### Reproduction

StackBlitz link: https://stackblitz.com/edit/benvwf-lmrtl4?file=src%2Fexample%2Fslider-range-example.ts
Steps to reproduce:
1. Drag the "start" thumb all the way to the right

### Expected Behavior

The "start" thumb stops at the "8" tick mark, never reaches the last "9".

### Actual Behavior

- The "start" thumb goes up to the "end" position ("9").
- The form control value (printed above the slider) shows "8" - out of sync with the actual thumb state in the DOM

### Environment

- Angular: 16
- CDK/Material: 16
- Browser(s): Firefox
- Operating System (e.g. Windows, macOS, Ubuntu): macOS

Guide de contribution

Ouvrir le guide de contribution

Piste de recherche

Commencez par la reproduction StackBlitz liée et suivez comment les contrôles de formulaire de début et de fin du slider mettent à jour leurs éléments input sous-jacents après setValue(..., { emitEvent: false }). Vérifiez que le correctif maintient la position du thumb, la valeur du DOM et la valeur du contrôle de formulaire synchronisées, tout en garantissant que la valeur de début reste inférieure à la valeur de fin.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Évaluation

Stack technique
angular, typescript
Domaine
frontend
Type d'issue
Bug
Difficulté
3/5
Temps estimé
1-2 jours
Activité
À l'abandon
Clarté
Plutôt claire
Accessibilité débutants
38/100

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.