JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

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

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

JavaScript

var con = document.querySelector('.con');
var activeElement;
var offsetX = 0;
var offsetY = 0;


con.addEventListener('mousedown', function(e){
	console.log('нажатие на кнопку')
   activeElement = e.target
   offsetX = e.offsetX;
   offsetY = e.offsetY;
});
con.addEventListener('mouseup', function(){
	console.log('Отпускание кнопки')
  activeElement = null
 
});

con.addEventListener('mousemove', function(e){
	console.log('Двигаем курсор', e)
    
   if(activeElement){
     activeElement.style.left = (e.clientX - offsetX - 6) + 'px'
   }
});