使用jQuery滑块显示值范围

Question

我正在使用一些jQuery UI滑块，我想知道是否有一种方法可以显示一定范围的值而不是单个值。 例如10-20、20-30、30-40，而不是10、20、30、40？ 我真的很感谢任何帮助。 我知道API中有一个范围滑块，但是我正在尝试使其适应范围的增量。

这是一个工作示例的jsfiddle

$(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希望在拖动手柄时移动整个滑块范围。 我发现这个计算器和修改他的代码得到它的工作 ...查看JSBin