Question

我正在研究一些jQuery UI滑块，我想知道有没有办法显示一系列值而不只是单个值。如10-20,20-30,30-40而不仅仅是10,20,30,40？我真的很感激任何帮助。我知道API中有一个范围滑块，但我试图让它捕捉到范围增量。

Here is a jsfiddle for a working example

$(function() {
//age range function
$("#ageRangeSlider").slider({
  value: 10,
  min: 0,
  max: 100,
  step: 10,
  slide: function(event, ui) {
    $("#yourAgeRange").val(ui.value);
  }
});
$("#yourAgeRange").val($("#ageRangeSlider").slider("value"));
});

<p>
  <label for="yourAgeRange">Your age range:</label>
  <input type="text" id="yourAgeRange" style="border:0; color:#f6931f; font-weight:bold;">
</p>
<div id="ageRangeSlider"></div>

Answer 1

将范围和起始值添加到滑块

  values:[50,100],
  range:true,

jsfiddle

更新： OP希望拖动手柄时移动整个滑块范围。我找到了this stackoverflow和modified his code to get it working ...请参阅JSBin

使用jQuery滑块显示值范围

1 个答案: