[slider][material-next] Implement opacity-based disabled state
Open
@DiegoAndai is already working on this.
Since Sep 14, 2023.
design: material you
on hold
scope: slider
type: enhancement
- Dominant language
- JavaScript
- Stars
- 99.1k
- Forks
- 32.5k
- Avg merge
- 2d 17h
- Merged PRs (30d)
- 106
Description
The disabled states in Material You use colors with opacity < 1, but right now, the Slider disabled state uses a solid color. Implementing this is not straightforward because multiple elements are stacked on top of each other:
- Thumbs on top of marks, the track, and the rail
- Marks on top of the track and the rail
- Track on top of the rail
It is not possible to use opacity < 1 on these elements as those underneath show through, and colors blend. This is not the desired outcome.
This issue aims to refactor the component's structure to not stack elements and implement the correct colors with opacity.
Experimenting
- Radial gradients would be helpful to "clip" the thumb shape into the track and rail
- Marks underneath the thumbs shouldn't be displayed
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Assessment
This issue has not been assessed yet.