Can't set styling of input range element in React

I have a problem with my input range element in my drum machine app which I created using React.

First off, I used a default-looking input in order to set my volume, and it worked:
https://i.stack.imgur.com/PHgIu.png

So I decided that I want to change my color from blue to something else, and then problems began.

After hours of searching I found a way how to change a color of the slider. But then I had to make my slider work so that it changes volume based on its thumb position just like it previously worked.

And I did it but in doing so my slider’s color is not changing anymore and on top of that my buttons have stopped working.

Now I don’t know how to make it work.

I want a slider like the one shown in the second picture: https://i.stack.imgur.com/JAqTU.png

So that it changes color using linear gradient and has the ability to set volume.

Here is a link to my current CodePen: Drum Machine-current

And this is a link of a previous, working version: Drum Machine - previous

P.S. (Written this here because of new users limit on links)

This topic was automatically closed 41 days after the last reply. New replies are no longer allowed.