Simple Slider

HTML

<div class='contain'>
  <div class='bar'></div>
</div>

CSS

.contain {
  height: 4px;
  width: 450px;
  background: grey;
  position: relative;
  top: 200px;
  left: 100px;
}

.bar {
  width: 90px;
  height: 12px;
  background: transparent;
	border: 1px solid red;
  position: absolute;
  top: calc(50% - 7px);
  left: 0px;
  cursor: ew-resize;
  box-sizing: border-box;
}

JavaScript

document.getElementsByClassName('contain')[0].addEventListener("mousedown", downHandle);

function downHandle() {
  document.addEventListener("mousemove", moveHandle);
  document.addEventListener("mouseup", upHandle);
}

function moveHandle(e) {
  var left = e.clientX - document.getElementsByClassName('contain')[0].getBoundingClientRect().left;
  var num = document.getElementsByClassName('contain')[0].offsetWidth / 100;
  var val = (left / num);

  if (val < 0) {
    val = 0;
  } else if (val > 100) {
    val = 100;
  }

  var pos = document.getElementsByClassName('contain')[0].getBoundingClientRect().width * (val / 100);
  if(pos > 90){
  document.getElementsByClassName('bar')[0].style.left = pos - 90 + 'px';
  }
  else{
  document.getElementsByClassName('bar')[0].style.left = 0 + 'px';
  }
}

function upHandle() {
  document.removeEventListener("mousemove", moveHandle);
  document.removeEventListener("mouseup", upHandle);
}