How to style the thumb of the range input type based on the value?

Question

I have to change the thumb of the range based on the value selected. I tried to implement it using attribute selector and selecting range and the current value. I have to display different image on different values. Please help me.

Click here to view how I want the thumb on value 2

Click here to view how I want the thumb on value 0

The Below code is How I am trying to do it but that's not working

CSS

    .integritySlider input[type=range][value=2]::-webkit-slider-thumb {
-webkit-appearance: none ;
appearance: none;
height: 2.5vw;
width: 2.5vw;
border: 0;
background-image: url('correctBGicon.png');
background-size: contain;
background-position: center center;
background-repeat: no-repeat;
cursor: pointer;
margin-top: -1.25vw;
}
.integritySlider input[type=range][value=1]::-webkit-slider-thumb {
-webkit-appearance: none ;
appearance: none;
height: 2.5vw;
width: 2.5vw;
border: 0;
background-image: url('semicorrectBGicon.png');
background-size: contain;
background-position: center center;
background-repeat: no-repeat;
cursor: pointer;
margin-top: -1.25vw;
}
.integritySlider input[type=range][value=0]::-webkit-slider-thumb {
-webkit-appearance: none ;
appearance: none;
height: 2.5vw;
width: 2.5vw;
border: 0;
background-image: url('incorrectBGicon.png');
background-size: contain;
background-position: center center;
background-repeat: no-repeat;
cursor: pointer;
margin-top: -1.25vw;
}

JSX

  silder(e){
    this.setState({
        silderValue: e.target.value
    }, () => console.log(this.state.silderValue))
  }
  render(){
  return(
  <div className={style.integritySlider}><input type="range" value={this.state.silderValue} min="0" step="1" max="2" onChange={this.slider}/></div>
  );
  }
                        

Answer 1

It was a Syntactical Error. The attribute value must be in quotes

  input[type=range][value="2"]