范围滑块添加固定步骤

时间:2018-09-15 12:00:31

标签: jquery

我有一个范围滑块,当您拖动滑块时,滑块上方的标签会从12个月增加到60个月。

,并且滑块下方的值从1更改为5,其中1个显示在12个月,而5个显示在60个月。

我想将此滑块用作贷款预测,因此可以向滑块添加固定值的5个步骤,而不仅仅是从1滚动到5。

我是jquery的新手,所以我尝试更改值和min和max,但一切都停止了。

    $(window).load(function(){

    $(function() {
       var labelArr = new Array("", "12 months", "24 months", "36 months", 
    "48 months", "60 months");
     var initialValue=3, min=1, max=5;
     $("#slider").slider({
     value:initialValue,
     min: min,
     max: max,
     step: 1,
     slide: function( event, ui ) {
      $("#days").val( ui.value );
      $("#label").text(labelArr[ui.value]);
      $("#label").css("margin-left", (ui.value-min)/(max-min)*100+"%");
      $("#label").css("left", "-50px");
     }
    });
    $("#days").val(initialValue);
    $("#label").text(labelArr[initialValue]);
    $( "#label" ).css("margin-left", (initialValue -1)/(max-min)*100+"%");
    $("#label").css("left", "-50px");
    });

    });




  <div id="label">Please slide !</div>
  <div id="slider"></div>
  <div align="center">
  <input type="text" id="days" />
  </div>

0 个答案:

没有答案