React, how to make a slider (slider)?

Question

JavaScript

Good afternoon, I can not understand two things:
1. How to make the slider drag, now it is implemented using a click. That is, they clicked once - the slider moved. Zna. that you need to use onMouseDown, but as if there is a simple click;
2. How to move on a click, let's say by a value of 2 or 6, etc.

class Slider extends Component {

    constructor(props) {
        super(props);
        this.state = {
            value: this.props.value
        };
        this.changeValue = this.changeValue.bind(this);


    }

    changeValue(e) {
        console.log(e.target.pageY);
        let stage = 100/this.props.elements;
        let line = document.querySelector(".ui-slider-range.ui-corner-all.ui-widget-header.ui-slider-range-min" + `.${this.props.class}`);
        let slider = document.querySelector(".ui-slider-handle.ui-corner-all.ui-state-default" + `.${this.props.class}`);
        if (this.state.value < this.props.max) {
            this.setState({value: this.props.step + this.state.value});

            let numberPercentageLine = parseInt(line.style.width) + stage;
            console.log(numberPercentageLine);
            numberPercentageLine.toString();
            console.log(numberPercentageLine);
            line.style.width = numberPercentageLine + "%";
            console.log(line.style.width);

            let numberPercentageSlider = parseInt(slider.style.left) + stage;
            numberPercentageSlider.toString();
            slider.style.left = numberPercentageSlider + "%";

        } else {
            return null;
        }
    }

    render () {
        return (
            <div className="sliderblock">
                <div className="row no-gutters align-items-center">
                    <div className="col-auto">
                        <div className="sliderblock__min">{this.props.min}</div>
                    </div>
                    <div className="col">
                        <div className="slider-rangeblock" onMouseDown={this.changeValue}>
                            <div
                                className="slider-range ui-slider ui-corner-all ui-slider-horizontal ui-widget ui-widget-content"
                            >
                                <div className={ `ui-slider-range ui-corner-all ui-widget-header ui-slider-range-min ${this.props.class}`} style={{width: "0%"}}>
                                </div>
                                <span className={ `ui-slider-handle ui-corner-all ui-state-default ${this.props.class}`} style={{left: "0%"}}>
                                </span>
                            </div>

                        </div>
                    </div>
                    <div className="col-auto">
                        <div className="sliderblock__cur">
                            <span className="sliderblock__cur-val">
                                {
                                    this.props.specChar !== undefined ?
                                        `${this.props.specChar}${this.state.value}` : `${this.state.value}`
                                }
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        )
    }

}

export default Slider;


Принимает параметры
    <Slider
              min={0}
              value={0}
              max={10}
              step={1}
              elements={10}
              class={"skill"}
    />

Answer 1

graph?

Answer 2

MongoDB