https://hrx66w.csb.app/ How to customize styles for this slider selected range color & pointer color ?
<input
ref={this.inputRef}
id="sliderId"
className="inputR w-100"
name="sliderName"
type="range"
min={minValue}
max={maxValue}
value={this.state.value}
onChange={this.handleChange(minValue, maxValue)}
style={styleInput}
/>
Use accent-color in your css file
// Example
.inputR {
accent-color: red;
}
This is good for styling inputs type range, checkbox, radio and progress.
https://developer.mozilla.org/en-US/docs/Web/CSS/accent-color
From your example, I can say that the style you have applied is overridden by browser. To counter that, you should reset all styles for the slider before any customization. You can add this to your styles.
.inputR {
-webkit-appearance: none;
}
.inputR:focus {
outline: none;
}
.inputR::-webkit-slider-thumb {
-webkit-appearance: none;
border-radius: 50%;
background: rgba(179, 35, 179, 0.75);
height: 16px;
}