how to change the react-bootsrap-range-slider color?

Question

return (
        <div style={divStyles}>
            <Row style={{"justifyContent": "center"}}>
                <Col xs={2}>
                    { title }
                </Col>
                <Col xs={2}>
                    <RangeSlider variant="primary" value={value} onChange={e => setValue(+e.target.value)} min={minLimit} max={maxLimit}></RangeSlider>
                </Col>
                <Col xs={1}>
                    <TextField
                            label={title} variant="standard"
                            value={ value }
                            type="number"
                            onChange={e => setValueWithLimit(+e.target.value)}
                        />
                </Col>
                <Col xs={2}>
                    { renderDays() }
                </Col>
            </Row>
        </div>

The above code is a slider component, used for multiple actions, I spent the past three hours in trying to figure out how to change the slider color, which is blue right now, to a different color.

one way of doing it is by changing variants, but, none of them have me designated color.

Answer 1

If you can use pure css solution, then using this will override the color of the circle of the slider

input[type="range"]::-webkit-slider-thumb {
  background: red !important;
}

/* All the same stuff for Firefox */
input[type="range"]::-moz-range-thumb {
  background: red !important;
}

/* All the same stuff for IE */
input[type="range"]::-ms-thumb {
  background: red !important;
}