JSFiddle - React, Tailwind, and code Playground

HTML

<div class="slider"></div>
<div class="slider" data-value="15"></div>
<div class="slider" data-value="30"></div>
<div class="slider" data-value="45"></div>
<div class="slider" data-value="60"></div>
<div class="slider" data-value="45"></div>
<div class="slider" data-value="30"></div>
<div class="slider" data-value="15"></div>
<div class="slider"></div>
<div class="slider" data-value="15"></div>
<div class="slider" data-value="30"></div>
<div class="slider" data-value="45"></div>
<div class="slider" data-value="60"></div>
<div class="slider" data-value="45"></div>
<div class="slider" data-value="30"></div>
<div class="slider" data-value="15"></div>
<div class="slider"></div>
<div class="slider" data-value="15"></div>
<div class="slider" data-value="30"></div>
<div class="slider" data-value="45"></div>
<div class="slider" data-value="60"></div>
<div class="slider" data-value="45"></div>
<div class="slider" data-value="30"></div>
<div class="slider" data-value="15"></div>
<div class="slider"></div>

CSS

.slider{
 width:200px;
 height:24px;
 background-color:rgba(0,0,0,1);
 border:4px solid grey;
 cursor:pointer;
 border-radius:16px;/*4+4+24/2*/
 margin:2px;
 -webkit-transition:background-color 2000ms ease
}
.slider>div{
 box-sizing:border-box;
 width:24px;
 height:24px;
 background-color:rgba(255,255,255,1);
 border:4px solid grey;
 border-radius:50%;
}

JavaScript

(function(){
function init(){
 ss=document.getElementsByClassName('slider');
 for(var a=0,b;b=ss[a];++a){
  b.appendChild(document.createElement('div'));
  b.sMax=b.offsetWidth-b.firstChild.offsetWidth-8;//border=8
  b.sPos=b.offsetLeft+(b.firstChild.offsetWidth/2);
  b.style.backgroundColor='hsla('+(360/ss.length*a)+',100%,80%,1)';
  b.addEventListener('mousedown',se.mousedown,false);
 }    
 document.addEventListener('mousemove',se.mousemove,false);
 document.addEventListener('mouseup',se.mouseup,false);
 window.removeEventListener('load',init,false);
 funstart();
}
function funstart(){
 var l=ss.length;
 while(l--){
  var z=ss[l];
  x=z.sMax/*Math.random()*z.sMax*/;
  z.firstChild.style.webkitTransition='-webkit-transform '+/*((Math.random()*500)+500)*/1000+'ms ease '+(l*(1000/ss.length))+'ms';
  z.firstChild.addEventListener('webkitTransitionEnd',funback,false);
  z.firstChild.style.webkitTransform='translate3d('+x+'px,0,0)';
 }
}
function funback(e){
 e.target.removeEventListener('webkitTransitionEnd',funback,false);
 e.target.addEventListener('webkitTransitionEnd',funend,false);
 var cx=(e.target.parentNode.dataset['value']||0)/100*e.target.parentNode.sMax;
    console.log(cx);
 e.target.style.webkitTransform='translate3d('+cx+'px,0,0)';
}
function funend(e){
 e.target.removeEventListener('webkitTransitionEnd',funend,false);
 e.target.style.webkitTransition='';
}
function move(e){
 x=(x=e.pageX-current.sPos,x<0?0:x>current.sMax?current.sMax:x);
 current.firstChild.style.webkitTransform='translate3d('+x+'px,0,0)';
}
var ss,mu=true,current=false,se={
 mousedown:function(e){current=this;mu=false;move(e);e.preventDefault();e.stopPropagation()},
 mousemove:function(e){mu||move(e)},
 mouseup:function(e){mu=true;current.dataset['value']=100/current.sMax*x|0;current=false} 
},x;
//window.addEventListener('load',init,false);
init();
})();