Skip to content

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

Open
@DiegoAndai

Description

@DiegoAndai

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

Metadata

Metadata

Assignees

Labels

component: sliderThis is the name of the generic UI component, not the React module!design: material youenhancementThis is not a bug, nor a new featureon holdThere is a blocker, we need to wait

Projects

Status

No status

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions