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

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.

CodePudding user response：

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;
}