https://hrx66w.csb.app/ ¿Cómo personalizar los estilos para este control deslizante de color de rango seleccionado y color de puntero?
<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 acento de color en su archivo css
// Example .inputR { accent-color: red; }Esto es bueno para estilizar el rango de tipo de entrada, la casilla de verificación, la radio y el progreso.
https://developer.mozilla.org/en-US/docs/Web/CSS/accent-color
De su ejemplo, puedo decir que el navegador anula el estilo que ha aplicado. Para contrarrestar eso, debe restablecer todos los estilos del control deslizante antes de cualquier personalización. Puede agregar esto a sus estilos.
.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; }