JSFiddle - React, Tailwind, and code Playground

HTML

<div id='bar'>
<div id='slider'>
 
</div>
</div>
<br />
 
<div id='info'>info</div>

CSS

#bar{
	width:200px;
	height:25px;
	border:1px solid black;
	position:relative;
}

#slider{
	width:0%;
	height:100%;
	background-color:red;
	top:0px;
	left:0px;
	position:absolute;
	cursor:pointer;
}

#info{
	width:200px;
	height:25px;
	border:1px solid black;	
}

JavaScript

var bar, slider;

function init(){
	bar = document.getElementById('bar');
	slider = document.getElementById('slider');
	info = document.getElementById('info');
	bar.addEventListener('mousedown', startSlide, false);	
	bar.addEventListener('mouseup', stopSlide, false);
}

function startSlide(event){
	var set_perc = ((((event.clientX - bar.offsetLeft) / bar.offsetWidth)).toFixed(2));
	info.innerHTML = 'start' + set_perc + '%';	
	bar.addEventListener('mousemove', moveSlide, false);	
	slider.style.width = (set_perc * 100) + '%';	
}

function moveSlide(event){
	var set_perc = ((((event.clientX - bar.offsetLeft) / bar.offsetWidth)).toFixed(2));
	info.innerHTML = 'moving : ' + set_perc + '%';
	slider.style.width = (set_perc * 100) + '%';
}

function stopSlide(event){
	var set_perc = ((((event.clientX - bar.offsetLeft) / bar.offsetWidth)).toFixed(2));
	info.innerHTML = 'done : ' + set_perc + '%';
	bar.removeEventListener('mousemove', moveSlide, false);
	slider.style.width = (set_perc * 100) + '%';
}

init();