Range

Выбор диапазона 2х значений

HTML

<div class="slider">
  <div class="bar">
    <div class="lp" data-pos="0.1"></div>
    <div class="rp" data-pos="0.7"></div>
  </div>
  </div>

CSS

body{
  background: #333;
}
.slider{
  width:500px;
  height:5px;
  background:#555;
  position:relative;
}
.slider .bar{
  position:absolute;
  left:50px;
  width:300px;
  background:yellow;
  height:100%;
}
.slider .bar .lp span{
    position:relative;
    left:-30px;
}
.slider .bar .rp span{
    position:relative;
    left:10px;
}
.slider .bar .lp,.slider .bar .rp{
  cursor:pointer;
  background:#555;
  width:16px;
  height:16px;
  border:3px solid yellow;
  border-radius:100%;
  position:absolute;
  line-height:400%;
  color:white;
  user-select:none;
}
.slider .bar .lp{
  left:0px;
  top:-8px;
}
.slider .bar .rp{
  left:100%;
  top:-8px;
}

JavaScript

var drag = false;
var values = [];
for(var i = 0; i < 24; i++)
	for(var j = 0 ; j < 60;j+=10){
  	var h = (i+"").length < 2?"0"+i:i;
    var m = (j+"").length < 2?"0"+j:j;
  	values.push(h+":"+m)
    }
    
$(".slider").each(function(i,e){
	updateView(e);
});
$(".slider>.bar>.lp,.slider>.bar>.rp").bind("mousedown",function(){
	drag = $(this);
})
$(document).bind("mousemove",function(e){
	if(!drag)
  	return;
   var x = (e.pageX - $(drag).outerWidth()/2 - $(drag).parent().parent().offset().left)/$(drag).parent().parent().outerWidth();
   if(x < 0 ) x = 0;
   if(x > 1) x = 1;
   var rp = $(drag).parent().find(".rp");
   var lp = $(drag).parent().find(".lp");
   if($(drag).hasClass("lp") && x > $(rp).attr("data-pos") ){
   		$(rp).attr("data-pos",x);
   }
   if($(drag).hasClass("rp") && x < $(lp).attr("data-pos") ){
   		$(lp).attr("data-pos",x);
   }
   $(drag).attr("data-pos",x);
   updateView($(drag).parent().parent());
});
$(document).bind("mouseup",function(){
	drag = false;
});
function updateView(slider){
	var l  =$(slider).find(".lp").attr("data-pos");
	var r  =$(slider).find(".rp").attr("data-pos");
  var x = $(slider).outerWidth() * l;
  var w = (r - l)*$(slider).outerWidth();
  $(slider).find(".bar").css({left:x+"px",width:w+"px"});
  var index = Math.round(values.length*l);
  if(index >= values.length)
  	index = values.length-1;
  $(slider).find(".lp").html("<span>"+values[index]+"</span>");
  index = Math.round(values.length*r);
  if(index >= values.length)
  	index = values.length-1;
  $(slider).find(".rp").html("<span>"+values[index]+"</span>");
  }