JSFiddle - React, Tailwind, and code Playground

HTML

<p>---</p>

<div id="slider">
<div id="bg">
	<div id="thumb"></div>
</div>
</div>

CSS

#slider{
	background: #eee;
	position: absolute;
	top: 100px;
	left: 80px;
}
#bg{
	background: rgba(0,0,0,.1);
	width: 262px ;
	height: 3px;
	border-radius: 100px;
}

#thumb{
	height: 7px;
	width: 7px;
	background:  #999;
	border-radius: 20px;
	top: -2px;
	left: 0px;
	position: absolute;
	cursor: pointer;
}

JavaScript

var thumb = document.getElementById('thumb');
var bg 	  = document.getElementById('bg');
var drag_status = false;
var count = 0;
var x;
thumb.onmousedown = function(e){
	drag_status = true;
	x = e.pageX - thumb.offsetLeft;
}

document.onmousemove = function(e){
	if(!drag_status) return false;
		thumb.style.left = e.pageX - x  + 'px';
	if(thumb.offsetLeft < 0) thumb.style.left =  0 + 'px';
	if(thumb.offsetLeft > bg.offsetWidth - thumb.offsetWidth)thumb.style.left =  bg.offsetWidth - thumb.offsetWidth + 'px';
	count = Math.round(thumb.offsetLeft/10)*10;
	document.getElementsByTagName('p')[0].innerHTML = count;
}

document.onmouseup = function(){
	drag_status = false;
}