Editing the CSS in react range slider from npm module

Question

I want to change the background-color of React RangeSlider. Since its library is installed via npm, I cannot edit the CSS. Is there any way to import CSS from npm module and use it as my customized CSS. This is the code:

import React, { Component } from 'react'
import Slider from 'react-rangeslider'
class Horizontal extends Component {
    constructor (props, context) {
        super(props, context)
        this.state = {
            value: 850
        }
    }
    handleChangeStart = () => {
        console.log('Change event started')
    };
    handleChange = value => {
        this.setState({
            value: value
        })
    };

    handleChangeComplete = () => {
        console.log('Change event completed')
    };
    render () {
        const { value } = this.state
        return (
            <div>
                <div className='slider'  style={{ marginTop:'165px',marginLeft:'319px',width:'700px',backgroundColor:'EF5350'}} >

                    <div style={{ textAlign:'center',color:'gray',fontSize:'35px',marginBottom:'82px'}}>
                        <p> What is the size of your property?</p>
                    </div>
                    <Slider
                        min={850}
                        max={5000}
                        value={value}
                        onChangeStart={this.handleChangeStart}
                        onChange={this.handleChange}
                        onChangeComplete={this.handleChangeComplete}
                    />
                    <div className='value'>{value}</div>

                </div>
            </div>
        )
    }
}
export default Horizontal

I have taken this code from this site

The slider shows up after I used this in the header section

 <link rel="stylesheet" href="https://unpkg.com/react-rangeslider/umd/rangeslider.min.css" />

Otherwise, the slider doesn't show up even though I installed the library. It's not even overwriting the CSS.

Answer 1

You need to overrride the CSS responsible for the background color.

Like this:

.rangeslider-horizontal .rangeslider__fill {
  background-color: #1e88e5
}

Where rangeslider__fill is the class of main part of the slider.

Here's a forked sandbox