JSFiddle - React, Tailwind, and code Playground

by Alexey Mishin

HTML

<div id="slider" class="slider">
    <div class="thumb"></div>
  </div>

CSS

.slider {
  border-radius: 5px;
  background: #E0E0E0;
  background: -moz-linear-gradient(left top, #E0E0E0, #EEEEEE) repeat scroll 0 0 transparent;
  background: -webkit-gradient(linear, left top, right bottom, from(#E0E0E0), to(#EEEEEE));
  background: linear-gradient(left top, #E0E0E0, #EEEEEE);
  width: 310px;
  height: 15px;
  margin: 5px;
}

.thumb {
  width: 10px;
  height: 25px;
  border-radius: 3px;
  position: relative;
  left: 10px;
  top: -5px;
  background: blue;
  cursor: pointer;
}

JavaScript

var slider = document.getElementById("slider");
var thumb = document.getElementsByClassName("thumb")[0];

thumb.onmousedown = function(e) {
	var thumbCoords = getCoords(thumb);
  var sliderCoords = getCoords(slider);
  var rightEdge =slider.offsetWidth - thumb.offsetWidth;
  var shiftX = e.pageX - thumbCoords.left;
  
  document.onmousemove = function(e) {
  	newLeft = e.pageX - shiftX - sliderCoords.left;
    if(newLeft < 0) {
    	newLeft = 0;
    } else if (newLeft > rightEdge) {
    		newLeft = rightEdge;
    }
    
    thumb.style.left = newLeft + "px";
  }
  
  thumb.onmouseup = function() {
  	document.onmousemove = null;
    document.onmouseup = null;
  }
  
  thumb.ondragstart = function() {
  return false;
};
  
  
  function getCoords(element) {
  	var boxSizer = element.getBoundingClientRect();
    return {
    	left: boxSizer.left + pageXOffset
    }
  }
}