使用 jQuery 滑块显示值范围

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