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;
	
    var left = e.pageX - x;
    
    if (left < 0) 
        left = 0;
    if (left > bg.offsetWidth - thumb.offsetWidth)     
        left = bg.offsetWidth - thumb.offsetWidth;
	
    count = Math.round(left / 10) * 10;
    thumb.style.left = count + 'px';
	document.getElementsByTagName('p')[0].innerHTML = count;
}

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