Question

我想要在两个不同的滑块中创建jQuery slider，滑块连接了一个值：

$("#voltage" ).slider({
    values: [<%= math.floor(val2 * 1000 / 11) / 100.0 %>, <%= (val2 / 10 - math.floor(val2)) / 100 %>],
    min: 0.00,
    max: 0.99,
    step: 0.01,
    slide: function( event, ui ) {
        $("#voltage-amount").val((0.001 + (ui.val2[0] * 10) + ui.val2[1] / 10).toFixed(4))
    }
})

我的问题是如何提前分开这个滑块？

Answer 1

只需省略min / max值并使用某些函数计算值：

＆＃13;

$(document).ready(function() {
  $("#voltage1, #voltage2").slider({
    step: .1,
    slide: function(event, ui) {
      $($(this).data('id')).val(ui.value);
      recalc();
    }
  });
});

function recalc() {
  $(".answer span").text(
    parseFloat($("#first").val()) + parseFloat($("#second").val())
  );
}

＆＃13;

#voltage1,
#voltage2 {
  width: 60%;
  margin: 10px auto;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>

<input type="text" name="val2[]" id="first" value="0"/>
<input type="text" name="val2[]" id="second" value="0"/>

<div id="voltage1" data-id="#first"></div>
<div id="voltage2" data-id="#second"></div>

<div class="answer">Answer: <span>0</span>
</div>

＆＃13;

分离jQuery范围滑块

1 个答案: