React how to make the slider(the slider)?

Good day, I can not understand two things:
1. How to make drag and drop of a slider, now it is implemented using click. That is, once clicked, the slider is moved. Knowledge. you need to use onMouseDown, but it's like going on a simple click;
2. As on click to move for example to 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;


Takes parameters
 <slider min="{0}" value="{0}" max="{10}" step="{1}" elements="{10}" class="{"skill"}"></slider>
June 5th 19 at 21:58

Find more questions by tags JavaScriptReact