How to style HTML5 range input to have different color before and after slider in React?

Question

I am using HTML5 to create a range slider in React, and want to have two different colors before and after slider, I tried with css but it didn't work see the demo I want to have something like this image

image

any help please?

Answer 1

I just want to clarify that this is solely a CSS fix. The link above certainly addresses how to conceptualize and then style the progress or range element.

For React, there are routes you could go based on the slider value as a percentage, even using styled-components . However, this fork is a simple copy-paste job from the resource I linked above last week. Styling is different, but you can tune it to your needs. I'd suggest looking up the rules and selectors to understand how they relate, what they specifically bear on, and how you can then tweak them to suit.