JSFiddle - React, Tailwind, and code Playground

by yiiBoy

HTML

<div id="page">
  <div class="wrap slider1">
  
    <div class="bar">
      <div class="pointer">

      </div>
    </div>
  </div>
  <div class="wrap slider2">
  
    <div class="bar">
      <div class="pointer">

      </div>
    </div>
  </div>
</div>
<button class='btn'>press</button>

CSS

#page {
  width: 100%;
  min-height: 200px;
  background-color: green;
}
.wrap {
  padding: 50px 10px;
}
.bar {
  width: 400px;
  height: 50px;
  background-color: red;
  margin: 0 auto;
  position: relative;

}
.pointer {
  width: 25px;
  height: 25px;
  border-radious: 50%;
  left: 50%;
  margin-left: -12px;
  background-color: black;
  position: absolute;
  z-index: 1: 
}

JavaScript

class Slider {
	
	 constructor(element, minValue, maxValue, value)
   {		
   			this.minValue = minValue;
        this.maxValue = maxValue;
        this.value = value;
        this.element = element;
        this.pointer = this.element.querySelector('.pointer');

				var self = this;
   	    this.pointer.addEventListener('mousedown', function(e){
        	  self.mouse(e);
        }, false);
   }

	mouse(event) {
  	// coords in document
    var bar = document.querySelector('.bar');
    var self = this;

    document.onmousemove = function(e) {
     		// this == document
     		self.calcNewPosition(e,bar);
    }
    
    document.onmouseup = function() {
    		document.onmousemove = document.onmouseup = null;
    }
  }

  calcNewPosition(e, bar) {
    var barCoords = bar.getBoundingClientRect();
  	var barLeft = barCoords.left;
    var barRight = barCoords.right;

      var x = e.clientX;
      x = Math.max(x,barLeft);
      x = Math.min(x,barRight);
      x = x - barLeft;

      var progress = (x*100)/bar.offsetWidth
        this.pointer.style.left = progress + '%';
        this.value = Math.round((progress*(this.maxValue - this.minValue))/100);
        var event = new Event('change', {
        	element: this.element
        });
        this.element.dispatchEvent(event);
    };
    
    getValue() {
    	    return this.value;
    }
}

var sliderSelector = '.slider1';
var slider = document.querySelector(sliderSelector);
var s = new Slider(slider, 0, 200,10);
var sliderSelector = '.slider2';
var slider = document.querySelector(sliderSelector);
var s2 = new Slider(slider, 0, 200,10);

var button = document.querySelector('.btn');
button.onclick = function() {
	var v = s.getValue();
  console.log(v)
  button.innerHTML = 	(s.element+' '+ v);
}

s.element.addEventListener('change', function(e){
	var v = s.getValue();
  button.innerHTML = 	(s.element+' '+ v);
  console.log(v)
})