Range

Красивый range

by twobomb three

HTML

<div class="inputRange">
  <div class="text">Не владею</div>
  <div class="text">Использую готовые решения</div>
  <div class="text">Использую готовые решения и умею переделывать</div>
  <div class="text">Пишу сложный js с нуля</div>
  <div class="bar">
  <div class="dis"></div>
  </div>
  <div class="pointer"></div>
</div>
<br>
<br>
<br>
<br>
<br>
<div class="inputRange">
  <div class="text">Пример 1</div>
  <div class="text">Пример 2</div>
  <div class="text">Пример 3</div>
  <div class="text">Пример 4</div>
  <div class="text">Пример 5</div>
  <div class="text">Пример 6</div>
  <div class="text">Пример 7</div>
  <div class="text">Пример 8</div>
  <div class="text">Пример 9</div>
  <div class="text">Пример 10</div>
  <div class="bar">
  <div class="dis"></div>
  </div>
  <div class="pointer"></div>
</div>

CSS

.inputRange{
  user-select:none;
  position:relative;
  width:100%;
  height:15px;
}
.inputRange .bar .dis{
  background:#999;
  position:absolute;
  height:100%;
  width:100%;
  left:0;
}
.inputRange .bar{
  overflow:hidden;
  cursor:pointer;
  position:relative;
  width:100%;
  height:100%;
background: linear-gradient(to right, rgba(45,187,226,1) 0%,rgba(49,247,95,1) 25%,rgba(241,255,50,1) 50%,rgba(255,48,48,1) 75%); 
  clip-path: polygon(0px 80%, 100% 0px, 100% 100%,0px 100%);
}
.inputRange .pointer{
  position:absolute;
  cursor:pointer;
  width:16px;
  height:16px;
  left:-8px;
  background:white;
  border:1px solid #777;
  border-radius:100% 100% 100% 20%;
  transform:rotate(135deg);
}
.inputRange .bar .sep{
  width:.3%;
  height:100%;
  background:white;
  position:absolute;
}
.inputRange .text:hover{
  
}
.inputRange .text:hover{
  color:red;
  cursor:pointer;
}
.inputRange .text{
  font-family:Georgia;
  color:#999;
  margin:0;
  padding:0;
  font-size:.9em;
  margin-left:-0.3em;
 display:inline-block;
 
}

JavaScript

var drag = false;

$(".inputRange").each(function(i,el){
var d = $(el).find(".text");
	var step = (100/d.length);
    $(d).css({"width":step+"%"});
  	$(this).find(".bar").before(a);
    for(var j = 0; j < d.length;j++){
    	if(j== d.length-1)j++;
     var a =  $("<div class='sep'></div>");
      $(a).css({"left":j*step+"%"});
      $(this).find(".bar").append(a);
    }
});

$(".inputRange").bind("click",function(e){changeCur(e,this)});
$(document).bind("mousemove",function(e){changeCur(e,drag);});
function changeCur(e,drag){
	if(!drag)
  return;
var val = (e.clientX - $(drag).offset().left)/$(drag).outerWidth() * 100;
var step = 100/$(drag).find(".text").length;
		if(val >= 100-step*2){
    	if(val <=100-step)
      	val = 100 -step*2;
        else
        val = 100;
    }
    else
			val = Math.round(val/step)*step;
    
    if(val < 0) val = 0;
    if(val == 100 - step || val > 100) val = 100;
   $(drag).find(".pointer").css({left:val+"%"});
   $(drag).find(".pointer").css({left:"-="+$(drag).find(".pointer").innerWidth()/2+"px"});
   
   $(drag).find(".bar .dis").css({left:val+"%"});
		
}
$(".pointer").bind("mousedown",function(){
	drag = $(this).parent();
});

$(document).bind("mouseup",function(){
	drag = false;
});