Range

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

by twobomb three

HTML

<div class="slider">
    <div class="bar">
      <div class="lp" data-pos="0.1"></div>
      <div class="rp" data-pos="0.8"></div>
    </div>
  </div>
  
  <div class="slider">
    <div class="bar" data-start="10" data-end="20">
      <div class="lp" data-pos="0.1"></div>
      <div class="rp" data-pos="0.7"></div>
    </div>
  </div>

CSS

body{
  background: #333;
}
.slider{
  width:80%;
  height:5px;
  background:#555;
  position:relative;
  margin-bottom:50px;
  margin-left:20px;
}
.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 twobombSlider  = (function(){
var drag = false;
var values = [];

    
$(".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 startVal = parseInt($(slider).find(".bar").data("start"));
	var endVal = parseInt($(slider).find(".bar").data("end"));
  if(startVal > endVal)
  	endVal = startVal;
	startVal = startVal || 0;
  endVal = endVal || 100;
  var values = [];
  for(var i = startVal; i <= endVal;i++)
  	values.push(i);
	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>");
  }
  })();