feat(slider): Allow users to manually set custom min & max values on slider thumbs
- Dominant language
- TypeScript
- Stars
- 25k
- Forks
- 6.8k
- Avg merge
- 1d 8h
- Merged PRs (30d)
- 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
Contributor guide
Research direction
Start with the linked StackBlitz reproduction and trace how the slider's start and end form controls update their underlying input elements after setValue(..., { emitEvent: false }). Confirm the fix keeps the thumb position, DOM value, and form control value synchronized while enforcing the start value below the end value.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- angular, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 38/100