JSFiddle - React, Tailwind, and code Playground

HTML

<div class="slider-container">
<div class="slider">
</div>
</div>
<div class="slider-container">
<div class="slider">
</div>
</div>
<br />
<br />
<h1>ALSO moving mouse here while mousedown should move them sliders . nam sayin ?</h1>

CSS

body{
  user-select: none;
}
.slider-container{
  width:200px;
  border:4px solid black;
  height:100px;
  display: inline-block;
  margin: 10px;
}
.slider{
  width:0;
  background:#f00;
  height: 100%;
}

JavaScript

var classname = document.getElementsByClassName("slider-container");

const offset = function(el){
	var rect = el.getBoundingClientRect(),
		scrollLeft = window.pageXOffset || document.documentElement.scrollLeft,
		scrollTop = window.pageYOffset || document.documentElement.scrollTop;
	return {top: rect.top + scrollTop, left: rect.left + scrollLeft}
};
var mymousemove = function(e) {
    if (currentSlider) {
      var x = e.pageX; 
        
     	var width = e.pageX - offset(currentSlider).left;
      if (width < 0) width = 0;
      if (width > 200) width = 200;
   	  currentSlider.querySelector('.slider').style.width = width+'px';
    }
};
var currentSlider;
var mymousedown = function(e) {
   currentSlider = e.currentTarget;
}
var mymouseup = function(e) {
	if (currentSlider) {
    currentSlider = null;
   }
}

for (var i = 0; i < classname.length; i++) {
    classname[i].addEventListener('mousedown',mymousedown, false);
}
document.addEventListener('mousemove',mymousemove, false);
document.addEventListener('mouseup',mymouseup, false);