range not rendering properly on safari

[dvic]

https://www.whatsmybrowser.org/b/381QC

The coloured area of the select range is not visible.

safari:

chrome:

[nhobes]

You're right - thanks for pointing this out. I'll look into it and come back to you.

[nhobes]

So I've done a fair bit of digging into this and attempted multiple solutions, but it's still giving me grief (so that the range still provides a dynamic fill without requiring JS).

I looked into this link, but keep getting inconsistent results with the thumb.

Long story short, there's a proposal to standardise input[type="range"] styling: w3c/csswg-drafts#4410

I don't have time at the moment to investigate this further, but feel free to submit a PR if you come up with a solution :)

[nhobes]

For the record, this is where I got to, the dynamic fill is using a clip-path and box-shadow to simulate the progress fill.

[dvic]

I looked into this link, but keep getting inconsistent results with the thumb.

What inconsistency are you referring to? On my iPhone 14 that link works just fine, haven't tried my Mac yet.

[nhobes]

Sorry, I just meant when I tried to modify our range with those styles, it didn't quite work out well cross-browser like I'd planned. I got close as you can see above with the screenshot I attached, but couldn't quite get the desired look and feel.

[dvic]

Sorry, I just meant when I tried to modify our range with those styles, it didn't quite work out well cross-browser like I'd planned. I got close as you can see above with the screenshot I attached, but couldn't quite get the desired look and feel.

Ah clear