React - mousemove event isn't working correctly - reactjs

Question

I'm creating a range slider and this is how it works: i've added onMouseDown event to the slider - in the function, i've attached onMouseMove and onMouseUp events to document - that's it! Simple. It works perfect on codepen.io but not locally.
I expected to see the log "down" in the console, then a lot of "move" and finally get the "up" message.
But the events showing up at the same time after release the mouse button.
console log:
Where could be the problem? How to fix if?
My project is created with create-react-app. I ran it in Google Chrome and Opera.
That's my code:
class Box extends React.Component {
downHandler = (e) => {
console.log('down');
document.addEventListener('mousemove', this.moveHandler);
document.addEventListener('mouseup', this.upHandler);
}
moveHandler = (e) => {
console.log('move');
}
upHandler = (e) => {
console.log('up');
document.removeEventListener('mousemove', this.moveHandler);
document.removeEventListener('mouseup', this.upHandler);
}
render() {
return (
<div className="container">
<div className="circle"
onMouseDown={this.downHandler}></div>
</div>
)
}
}
ReactDOM.render(<Box />, document.getElementById('root'));
.container{
width: 400px;
height: 7px;
background-color: #abc4f1;
position: relative;
margin-top: 120px;
}
.circle{
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #eee;
box-shadow: 0 0 2px 2px rgba(0, 0, 0, .2);
position: absolute;
top: -7px;
left: calc(50% - 10px);
}
<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>