@ledminh
Posted
Yes, I feel your pain. Not all browsers are created equal. I spent a whole day just researching how to make the background behind the thumb green. Then, I figured out that not all browsers are created equal in terms of CSS but they are the same in terms of javascript, especially when you use webpack. So, the best way to tackle this problem is to use linear-gradient to set the background to 50% green and 50% black initially in CSS. Then, use javascript to change the percentage number when the slider's value changes.
About the arrow, you can use this tool: https://react-svgr.com/playground/ to transform the svg image of the arrow to React element then change its "fill" property to green.
Marked as helpful
@wesleyjacoby
Posted
@ledminh Hi Minh,
I also spent the entire day searching for a solution and eventually found one that worked. I also used linear-gradient
and then some JavaScript code, which to be honest, I still don't completely understand how it works, but it does. Haha.
Thanks for the link! I've bookmarked it. I plan on starting to learn React in October, so I'm sure it'll come in handy then!