0

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?

webcoder
  • 1,331
  • 1
  • 9
  • 27
  • 1
    Does this answer your question? [How to style HTML5 range input to have different color before and after slider?](https://stackoverflow.com/questions/18389224/how-to-style-html5-range-input-to-have-different-color-before-and-after-slider) – Jason White Feb 20 '20 at 03:58
  • Thank you I have tried that one, but couldn't find how to implement it in React – webcoder Feb 20 '20 at 04:17
  • 2
    I found a solution if still someone need it https://codesandbox.io/s/frosty-williams-mv8vl – webcoder Feb 26 '20 at 05:03

1 Answers1

0

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.

Jason White
  • 66
  • 5