在特定点定位滑块ui值

Question

我正在寻找一种在某些方面定位尺度的方法。 Slider从指定数组[5000,10000,15000,20000,25000,30000,35000,40000,45000,50000,55000,60000,65000,70000,75000,80000,85000,90000,95000,100000,200000中选取值， 300000,400000,500000]并且目前步骤之间存在相同的差距。但是我想在5,25,50,100和500处显示某些步骤，并将它们定位在每滑块长度的20％处。下图说明了我的想法：

Yardsticks positioned every 20%

寻找任何想法如何做到这一点。

$(function () {
  var sizes = [ "5,000", "10,000", "15,000", "20,000", "25,000", "30,000", "35,000", "40,000", "45,000", "50,000", "55,000", "60,000", "65,000", "70,000", "75,000", "80,000", "85,000", "90,000", "95,000", "100,000", "200,000", "300,000", "400,000", "500,000" ];
  $("#slider-range-max2").slider({
    range: "max",
    min: 0,
    max: sizes.length - 1,
    step: 1,
    create: function(event, ui) {
      $("#per").val(sizes[0] + ' IOPS');
    },
    change: function (event, ui) {
      $("#per").val(sizes[ui.value] + ' IOPS');
    }
  });

  $("#plus2").click(function () {
    var value = $("#slider-range-max2").slider("value");
    var step = $("#slider-range-max2").slider("option", "step");

    $("#slider-range-max2").slider("value", value + step);
  });

  $("#minus2").click(function () {
    var value = $("#slider-range-max2").slider("value")
    var ste

.slider{
  position: relative;
  margin-top: 20px;
  margin-bottom: 15px;
  width: 90%;
  background: #333;
 /* -moz-box-shadow: inset 0 0 10px #999;
  -webkit-box-shadow: inset 0 0 10px #999;
  box-shadow: inset 0 0 10px #999;*/
  height: 15px;
  border-radius:10px;
  border: 1px solid #DDDDDD;
  margin-left:15px;
}

.slider .ui-slider-handle{
  position: absolute; 
  background: red;
  border-radius:25px;
  width:20px; 
  height:50px; 
  top: -16px;
  left: 50px;
  border-style:none;
  box-shadow:none ;

}
input[type=text]{
   border: 1px solid #333;
  -webkit-border-radius: 25px;
  -moz-border-radius: 25px;
  border-radius: 25px;
  padding:5px 10px;
  margin-top:-15px;
  text-align: center;
  background-color:#ffffff;
  width:120px;
  color:#2A3137;
  font-size:18px;
  font-weight: bold;
  margin-top:5px;
  margin-left:5px;
 }
.minus, .plus{
	display:inline-block;
	float:left;
	   border: 1px solid #aaa;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 25px;
  padding:5px 10px;
  margin-top:-15px;
  text-align: center;
  background-color:#e3e3e3;
  color:#333;
  font-size:18px;
  font-weight: bold;
  margin-left: 5px;
  cursor: pointer;
   width:10px;
   margin-top:5px;
}

<div id="quote-input" class="slider-input">
			   <div id="minus2" class="minus"><span>-</span></div>
			    <input type="text" id="per" class="per slider-value">
			     <div id="plus2" class="plus">+</div>
                            <input type="hidden" name="perVal" id="perVal"/>
			 </div>
		         <div style="clear:both"></div>
		        <div class="slider-wrapper">
			 <div id="slider-range-max2" cl

可以在小提琴Slider in Fiddle

中访问滑块