Problem

We style the range input element's thumb (the round button). However, this causes the styling of the track on which it sits (the horizontal line) to become unstyled. This happens at least in the latest version of Firefox (66.0.4 at time of writing). Articles describe similar behaviour in Chrome although our styling seems to be broken in Chrome 74 entirely.

Solution

Add styling for the track that mirrors what browsers do (using the individual prefixes).

Alternatively we can remove the custom styling entirely because it's an element that isn't often used (the new gradient configuration is the only place I can come up with) and it looks fairly neutral in most default browser styling where it's known to work properly.

Comments

Kingdutch created an issue. See original summary.

xinyuma’s picture

Thanks again for noticing this @Kingdutch

What will happen to this function when 'custom styling' is removed? Will it be still functional?

Kingdutch’s picture

Removing the custom styling will display the default browser styles. These should work as long as there are no bugs in the browser itself ;-) Arguably it would be functionally better because it means that there is no chance that we broke accessibility with our custom styles.

xinyuma’s picture

I see. That would be a great idea I think :-)

Agamich’s picture

Version: 8.x-5.x-dev » 8.x-8.x-dev
Status: Active » Needs review

  • d7f8d65 committed on 8.x-8.x
    Issue #3055752 by agami4, Kingdutch: Remove styles for range input (#...
ronaldtebrake’s picture

Status: Needs review » Fixed

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.