JSFiddle - React, Tailwind, and code Playground

HTML

<div class="slider">
    <div class="ctrl"></div>
</div>

CSS

.slider{
    margin-top: 20px;
    margin-left: 50px;
    position: relative;
    height: 10px;
    width: 300px;
    background: #99f;
}
.ctrl{
    position: absolute;
    left: 0;
    top: -10px;
    width: 10px;
    height: 30px;
    background: #449;
    border-radius: 5px;
    cursor: pointer;
}

JavaScript

var dgd = (function () {

	var _container = document.querySelector('.slider');
	var _controller = document.querySelector('.ctrl');

	/**
	 * [_getCoords]
	 * @param  {[object]} el [DOM node]
	 * @return {[integer]}    [return coordinates of element]
	 */
	var _getCoords = function (el) {

		return el.getBoundingClientRect().left + pageYOffset;
	};

	var _ctC, _ctrlC;

	/**
	 * [_start define coordinates and adding even listeners]
	 * @param  {[event]} e [onMouseDown]
	 * @return {[boolean]}   [disable selection start]
	 */
	var _start = function (e) {

		_ctrlC = e.pageX - _getCoords(_controller);
		_ctC = _getCoords(_container);

		document.addEventListener('mousemove', _move);
		document.addEventListener('mouseup', _end);

		return false;
	};

	/**
	 * [_leftEdge]
	 * @param  {[integer]} pos [position of the controller in the container]
	 * @return {[integer]}     [0 or @param pos]
	 */
	var _leftEdge = function (pos) {

		return pos < 0 ? 0 : pos;
	};

	/**
	 * [_rightEdge]
	 * @param  {[integer]} pos [position of the controller in the container]
	 * @return {[integer]}     [right edge of container or @param pos]
	 */
	var _rightEdge = function (pos) {
		var edge = _container.offsetWidth - _controller.offsetWidth;

		return pos > edge ? edge : pos;
	};

	/**
	 * [_move makes controller draggable]
	 * @param  {[event]} e [onMouseMove]
	 */
	var _move = function (e) {

		var pos = e.pageX - _ctrlC - _ctC;
		var pLeft = pos;

		if (pos !== _leftEdge(pos)) {
			pLeft = _leftEdge(pos);
		}

		if (pos !== _rightEdge(pos)) {
			pLeft = _rightEdge(pos);
		}

		_controller.style.left = pLeft + 'px';
	};

	/**
	 * [_end dissable draggable]
	 * @param  {[event]} e [onMouseUp]
	 */
	var _end = function (e) {

		document.removeEventListener('mousemove', _move);
		document.removeEventListener('mouseup', _end);
	};

	return {
		init: function() {
            _container.addEventListener = function () {
            	return false;
           ...