Slider.js

import React, { Component } from "react";
import nouislider from "nouislider";

import "nouislider/distribute/nouislider.min.css";
import "./Slider.css";

class Slider extends Component {
    constructor(props) {
        super(props);
        this.root = React.createRef();
    }

    componentDidMount() {
        this._createSlider(this.root.current);
    }

    componentDidUpdate(prevProps) {
        if (
            prevProps.min !== this.props.min ||
            prevProps.max !== this.props.max ||
            prevProps.start !== this.props.start ||
            prevProps.end !== this.props.end
        ) {
            this._destroySlider();
            this._createSlider();
        }
    }

    render() {
        return <div ref={this.root}></div>;
    }

    _createSlider() {
        nouislider.create(this.root.current, {
            start: [this.props.start, this.props.end],
            connect: true,
            range: {
                min: this.props.min,
                max: this.props.max,
            },
        });

        const parseChanges = changes =>
            changes.map(ch => Math.round(parseFloat(ch)));

        this.root.current.noUiSlider.on("change", changes => {
            if (this.props.onChange) {
                this.props.onChange(...parseChanges(changes));
            }
        });

        this.root.current.noUiSlider.on("update", changes => {
            if (this.props.onSlide) {
                this.props.onSlide(...parseChanges(changes));
            }
        });
    }

    _destroySlider() {
        this.root.current.noUiSlider.destroy();
    }
}

export default Slider;