title: How to change slider-thumb color using React
body: <p>This is my actual input range:</p>
  
  <p><a href="https://i.stack.imgur.com/vnc3u.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/vnc3u.png" alt="enter image description here"></a></p>
  
  <p>This is what I want:</p>
  
  <p><a href="https://i.stack.imgur.com/KufAg.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/KufAg.png" alt="enter image description here"></a></p>
  
  <p>And <a href="https://codepen.io/mistochi/pen/YMQZKV" rel="nofollow noreferrer">this is my code</a>.</p>
  
  <p><strong>RangeComponent.tsx</strong>:</p>
  
  <pre><code>const active = '#64c3ef'
  const inactive = '#dbdbdb'
  
  export class RangeComponent extends React.Component&lt;Props&gt; {
    inputRef: any = React.createRef()
  
    state = { value: 10 }
  
    handleChange = (min: number, max: number) =&gt; (event: any) =&gt; {
      const value = event.target.value
      const progress = (value / max) * 100 + '%'
      this.setState({ value: value })
      const newBackgroundStyle = `linear-gradient(90deg, ${active} 0% ${progress}%, ${inactive} ${progress}% 100%)`
      this.inputRef.current.style.background = newBackgroundStyle
    }
  
    render() {
      const minValue = 10 
      const maxValue = 300
      const progress = (this.state.value / maxValue) * 100 + '%'
  
      const styleInput = {
        background: `linear-gradient(90deg, ${active} 0% ${progress}%, ${inactive} ${progress}% 100%)`,
      }
  
      return (
        &lt;div&gt;
          &lt;input
            ref={this.inputRef}
            id="sliderId"
            className="inputR"
            name="sliderName"
            type="range"
            min={minValue}
            max={maxValue}
            value={this.state.value}
            onChange={this.handleChange(minValue, maxValue)}
            style={styleInput}
          /&gt;
          &lt;div className="label"&gt;
            {this.state.value}
          &lt;/div&gt;
        &lt;/div&gt;
      )
    }
  }
  </code></pre>
  
  <p><strong>style.css</strong>:</p>
  
  <pre><code>.inputR::-webkit-slider-thumb {
      background: rgba(255, 208, 255, 0.75);
  }
  </code></pre>
  
  <p>If possible, I would like to control the thumb color not in style.css but in RangeComponent.tsx.</p>
  
  <p>I don't understand why the class <code>inputR</code> has no effects on the input style.
  How can I change the style using CSS from javascript object (<code>styleInput</code>)? </p>