feat(slider): Allow users to manually set custom min & max values on slider thumbs
- Ngôn ngữ chính
- TypeScript
- Star
- 25k
- Fork
- 6.8k
- Merge trung bình
- 1 ngày 8 giờ
- Pull request đã merge (30 ngày)
- 91
Mô tả
### 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
Hướng dẫn đóng góp
Hướng nghiên cứu
Bắt đầu với bản tái hiện StackBlitz được liên kết và theo dõi cách các form control bắt đầu và kết thúc của slider cập nhật các phần tử input bên dưới sau setValue(..., { emitEvent: false }). Xác nhận rằng bản sửa lỗi giữ cho vị trí thumb, giá trị DOM và giá trị form control được đồng bộ, đồng thời đảm bảo giá trị bắt đầu nhỏ hơn giá trị kết thúc.
Do mô hình lập chỉ mục viết ra từ nội dung của issue.
Đánh giá
- Công nghệ
- angular, typescript
- Lĩnh vực
- frontend
- Loại issue
- Lỗi
- Độ khó
- 3/5
- Thời gian dự kiến
- 1-2 ngày
- Mức độ hoạt động
- Đình trệ
- Độ rõ ràng
- Khá rõ ràng
- Mức phù hợp với người mới
- 38/100