Custom Track

by Lazaro Contreras

HTML

<div class='barr' max='100' color='#0074d9' track-color='black'></div>
<p class='result'>0</p>

CSS

*{
  margin:0;
}
.barr{
  position:relative;
  display:block;
  left:50px;
  top:50px;
  bottom:0;
  width:150px;
  height:10px; 
  background:#999;
  overflow:hidden;
  border-radius: 100px;
}
.scroll{
  position:absolute;
  display:block;
  left:0;
  top:0;
  bottom:0;
  width:10px;
  height:10px;
  cursor:default;
  border-radius: 80px;
}
.progress{
  position:relative;
  display:block;
  width:0;
  height:10px;
}
.result{
  position:relative;
  display:block;
  left:50px;
  top:0;
  bottom:0;
  font-family:helvetica;
}

JavaScript

var div = document.querySelector('.barr');
var p = document.querySelector('p');
var scroll = document.createElement('div');
var progress = document.createElement('div');
var scrollLeft = div.offsetLeft;
var MaxValue = div.getAttribute('max');
scroll.className = 'scroll';
scroll.style.background = div.getAttribute('track-color');
progress.className = 'progress';
progress.style.background = div.getAttribute('color');
div.appendChild(progress);
div.appendChild(scroll);
div.addEventListener('mousedown',function(){
ScrollOn()
});
function ScrollOn(e) {
	window.addEventListener('mousedown', Scroll, false);
  window.addEventListener('mousemove', Scroll, false);
  window.addEventListener('mouseup', ScrollOff, false);
}
function Scroll(e) {
	var ScrollValue = (e.clientX - scrollLeft - (scroll.offsetWidth/2));
  var Value = MaxValue*ScrollValue/(div.offsetWidth - scroll.offsetWidth);
	if(Value >= 0 & Value <= MaxValue){
   scroll.style.left = ScrollValue + 'px';
   progress.style.width = ScrollValue + (scroll.offsetWidth/2) + 'px';
   console.clear();
   p.innerHTML = ' Rounded:'+parseInt(Value)+'<br> Real:'+ Value;
   }else if(Value < 0){
   Value = 0;
   scroll.style.left = 0 + 'px';
   progress.style.width = 0 + 'px';
   p.innerHTML = ' Rounded:'+parseInt(Value)+'<br> Real:'+ Value;
   }else if(Value > MaxValue){
   Value = MaxValue;
   scroll.style.left =(div.offsetWidth - scroll.offsetWidth) + 'px';
   progress.style.width = (div.offsetWidth - scroll.offsetWidth)+ (scroll.offsetWidth/2) + 'px';
   p.innerHTML = ' Rounded:'+parseInt(Value)+'<br> Real:'+ Value;
   }
}
function ScrollOff(e) {
		window.removeEventListener('mousedown', Scroll, false);
    window.removeEventListener('mousemove', Scroll, false);
    window.removeEventListener('mouseup', ScrollOff, false);
}