React - input range change color dynamically

Question

I have a component that contains input from the type range. I have multiple instances of this component and on each component, I'd like to have a different color for the left side input range.

This is what I've got so far

  <div class={styles.bar}>
    <input
      type="range"
      style={{
        backgroundColor: props.color,
      }}
    />
  </div>

how can I edit the color dynamically? (I want to look exactly the same like a regular input range, but the button and left range in a different color)

this is a fiddle of my work.

Thanks