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

# Problem 5: `progress` is a `track` sibling, not a child

In Firefox, the `track`, the `progress` and the `thumb` are all siblings inside the `input[type='range']`. This means that the left edge of the `border-box` of the `progress` is attached to the left edge of the `content-box` of the `input[type='range']`. In this particular case where the `thumb` diameter is much bigger than the height of the `track`, meaning that the `thumb` goes beyond the lateral ends of the `track`, the `content-box` of the `input[type='range]` is the invisible box within which the `thumb` motion is restricted, a box extending beyond the lateral ends of the `track`.

![illustration of the problem showing how the Firefox progress starts before the vertical line it should start from (the left edge of the track's content-box)](https://user-images.githubusercontent.com/76854602/162988020-6da77e41-7fbc-4261-a043-03f0ab4a8d6f.png)

On a first look, this is a problem we could solve with masking - that's the approach I took with [this demo](https://codepen.io/thebabydino/pen/JovQwE) for example:

![range inputs with gradient progress](https://user-images.githubusercontent.com/76854602/162982259-ec3bd758-a77e-419b-9fd0-8bd6c8a6f711.png)

Unfortunately, this often ends up causing even more problems because `::-moz-range-progress` has another even bigger problem that's a lot more obvious when the height of the `border-box` of the `thumb` isn't bigger than the height of the `track`, which is what we'll be taking a look at next.

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


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

Received on Tuesday, 12 April 2022 14:41:39 UTC