JSFiddle - React, Tailwind, and code Playground

HTML

<div class="input">
  <div class="con">
	
	</div>
</div>

CSS

.input{
  background: white;
  height: 30px;
  position: relative;
  width: 300px;
}

.con{
			position: absolute;
      top: -4px;
			width: 12px;
			height: 40px;
			background: green;
      border-radius: 5px;
      
		}

JavaScript

var ball = document.querySelector('.con');

ball.onmousedown = function(e) { 
  function moveAt(e) {
    ball.style.left = e.pageX - ball.offsetWidth  + 'px';
    console.log(ball.style.left)
    
    //отмена перетаскивания
    
    if(ball.style.left == 300 + 'px' || ball.style.left == 0 + 'px' ){
  		document.onmousemove = null;
    	ball.onmouseup = null;
  	}
    
  }
  
 moveAt(e);
  // 3, перемещать по экрану
  document.onmousemove = function(e) {
    moveAt(e);
  }

  // 4. отследить окончание переноса
  ball.onmouseup = function() {
    document.onmousemove = null;
    ball.onmouseup = null;
  }
  
  
}