JSFiddle - React, Tailwind, and code Playground

HTML

some text<br>
<div class="slider" data-value="0"></div>
some text<br>

CSS

.slider{
 width:256px;
 height:44px;
 border:4px solid hsla(200,50%,50%,.05);
 border-right:none;
    border-radius:22px 0 0 22px;
 cursor:pointer;
 /*border-radius:22px;*/
 -webkit-user-select:none;
background-image:
-webkit-radial-gradient(center,ellipse cover,
 hsla(0,0%,50%,.2) 0%,
 hsla(0,0%,50%,.2) 21%,
 hsla(0,0%,0%,0) 24%,
 hsla(0,0%,0%,0) 31%,
 hsla(200,50%,50%,1) 34%,
 hsla(200,50%,50%,1) 41%,
 hsla(0,0%,0%,0) 44%,
 hsla(0,0%,0%,0) 100%),
-webkit-linear-gradient(top,hsla(0,0%,50%,.2) 0%,hsla(0,0%,50%,.2) 100%);
 background-repeat:no-repeat,no-repeat;
 background-size:36px 36px,216px 1px;
 background-position:0 0,18px 50%;
 display:block;
 margin-right:50px;
    box-sizing:border-box;
}
.slider:before{
 content:attr(data-value);
 line-height:36px;
 display:inline-block;
 padding-right:18px;
 margin-top:-4px;
 margin-left:100%;
 border:4px solid hsla(200,50%,50%,.05);
 border-left:none;
 border-radius:0 22px 22px 0;
 box-sizing:border-box;
 text-align:center;
 min-width:48px;
    font-family:sans-serif,airal;
    font-size:12px;
    font-weight:bold;
    color:hsla(200,50%,50%,1);
}
body{-webkit-user-select:none;}

JavaScript

(function(){

function move(e){
 var x=e.pageX-sp;
 //bt.style.webkitTransform='translate3d('+(x<0?0:x>mx?mx:x)+'px,0,0)';
 s.style.backgroundPosition=(x=x<0?0:x>mx?mx:x)+'px 0,50% 50%';
 s.dataset['value']=(x/mx*100)|0
}
var
     s=document.getElementsByClassName('slider')[0],
     mx=s.offsetWidth-36-4,// 2=border / getComputedStyle borderWidh * 2
     sp=s.offsetLeft+(36/2),//center of the btn
     mu=true;// mouseup?

window.addEventListener('mousedown',function(e){
 if(e.target.classList.contains('slider')){
  mu=false;
  move(e);
 }
},false);

window.addEventListener('mousemove',function(e){
 mu||move(e)
},false);
window.addEventListener('mouseup',function(e){
 mu=true;
    console.log(e);
 //current=false;
},false);

})();