Skip to content

[Slider][material-next] Implement opacity-based disabled state #38982

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
DiegoAndai opened this issue Sep 14, 2023 · 1 comment
Open

[Slider][material-next] Implement opacity-based disabled state #38982

DiegoAndai opened this issue Sep 14, 2023 · 1 comment
Assignees
Labels
component: slider This is the name of the generic UI component, not the React module! design: material you enhancement This is not a bug, nor a new feature on hold There is a blocker, we need to wait

Comments

@DiegoAndai
Copy link
Member

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
@DiegoAndai DiegoAndai added on hold There is a blocker, we need to wait component: slider This is the name of the generic UI component, not the React module! enhancement This is not a bug, nor a new feature design: material you labels Sep 14, 2023
@DiegoAndai DiegoAndai added this to the v6 milestone Sep 14, 2023
@DiegoAndai DiegoAndai self-assigned this Sep 14, 2023
@DiegoAndai
Copy link
Member Author

On hold until #38981 is completed. This issue should be easier after that refactor.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
component: slider This is the name of the generic UI component, not the React module! design: material you enhancement This is not a bug, nor a new feature on hold There is a blocker, we need to wait
Projects
Status: No status
Development

No branches or pull requests

2 participants