Re: [csswg-drafts] [css-pseudo-4] Standardizing input[type="range"] styling (#4410)

# Problem 2: just one `progress` part is insufficient

Sometimes designs require something after/ to the right of the `thumb` (attached to the right edge, as opposed to `::-moz-range-progress`, which is attached to the left edge), as it can be seen below:

![Screenshot of multiple slider, some of them with a progress/ fill to the left of the thumb, some of them with it to the right of the thumb.](https://user-images.githubusercontent.com/76854602/161579604-79a3354f-bb00-4cf2-9f55-23e5ba819ab5.png)

Other times, something on both sides of the thumb is required. Consider the example used to illustrate the previous problem. My workaround for that first problem used two pseudos on a wrapper. The `::before` emulates the outer non-rectangular shape (the `track`), while the `::after` emulates the inner one (the two progress parts, one to the left and one to the right of the `thumb`).

![Screenshot. Shows the layers of the previous slider. The thumb. The outer non-rectangular area and the inner non-rectangular area](https://user-images.githubusercontent.com/76854602/160865488-1b1d9cd3-dd02-441f-bd03-c707b6f0788c.png)

We cannot create both the outer and inner non-rectangular shapes using a single pseudo - that means we cannot have the dark grey progress part to the right of the `thumb` as belonging to `track`. It needs to be a different pseudo. If we only have a single `progress` part, then that goes up until the middle of the `thumb` and we're missing the non-rectangular dark grey part to the left of the `thumb` because we cannot create that on the same pseudo as the non-rectangular `track` shape - not with the inner shadows and gradients.

So just having a `track`, a `progress` and a `thumb` that's a sibling of the `track` won't do. We need two progress parts, in the same way IE/ pre-Chromium Edge had `::-ms-fill-lower` and `::-ms-fill-upper`.

![Screenshot. Shows the structure inside a range input for IE/ pre-Chromium Edge.](https://user-images.githubusercontent.com/76854602/160443331-fbc6590a-15b5-4b7e-9d4d-a301cacf7bb0.png)

-- 
GitHub Notification of comment by thebabydino
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/4410#issuecomment-1087714744 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Monday, 4 April 2022 15:40:00 UTC