JSFiddle - React, Tailwind, and code Playground

by Oleg Mikhailov

HTML

<div class="slider">
  <div class="linear">
    <div class="selected"></div>
    <div class="handler"></div>
  </div>
</div>

CSS

*, *:before, *:after {
	box-sizing: border-box;
}
.slider {
  display: inline-block;
  padding: 20px;
  cursor: pointer;
}
.linear {
  position: relative;
  background-color: #ccc;
  height: 5px; width: 150px;
}
.selected {
  position: absolute; top: 0; left: 0;
  height: 100%;
  background-color: #aaa;
}
.handler {
  position: absolute; top: 0; left: 0;
  margin-top: -5px; margin-left: -7.5px;
  height: 15px; width: 15px;
  border-radius: 50%;
  background-color: #666;
  cursor: pointer;
}

JavaScript

var slider = $('.slider');
var selected = $('.selected');
var handler = $('.handler');
function move(e) {
	var coords = e.pageX - selected.offset().left;
  if(coords < 0) coords = 0; else if(coords > slider.width()) coords = slider.width();
	handler.css('left', coords);
  selected.css('width', coords);
}
slider.on('mousedown', function(e) {
	move(e);
  $(document).on('mousemove', function(e) {
  	move(e);
  }).one('mouseup', function(e) {
 		$(this).off(); 
  });
})