0

I am working on some jQuery UI sliders and I was wondering is there a way to display a range of values instead of just single values. Such as 10-20, 20-30, 30-40 instead of just 10,20,30,40? I would really appreciate any help on this. I know there is a range slider in the API, but I am trying to get it to snap to the range increments.

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>
Justin
  • 416
  • 3
  • 9
  • 26

1 Answers1

2

Add range and starting values to the slider

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

jsfiddle

Update: OP wants the whole slider range to move when you drag a handle. I found this stackoverflow and modified his code to get it working... See the JSBin

Community
  • 1
  • 1
Shanimal
  • 11,517
  • 7
  • 63
  • 76
  • That does work, but then there are two toggles on the slider. Is there any way to have just one while keeping the range? – Justin Jun 25 '14 at 02:08
  • events are not updating as I would expect. here's something that does what you want, although it allows you to adjust the range ends, if you drag the range in the middle the two ends move with it. http://stackoverflow.com/questions/5955343/drag-the-range-of-a-ui-input-range-slider/6095941#6095941 – Shanimal Jun 25 '14 at 02:59
  • 1
    ok I got it http://jsfiddle.net/Swd9S/150/ Don't hesitate to give the other guy a +1. I gave him one as well. – Shanimal Jun 25 '14 at 03:05
  • Thanks so much. I love stackoverflow and everyone that helps people like me on here! – Justin Jun 25 '14 at 04:33
  • After looking at that fiddle it does not snap. It would be nice to have it snap to the ranges. – Justin Jun 25 '14 at 04:36
  • 1
    Justin, you have to add the step value back in... (http://jsfiddle.net/Swd9S/151/) – Shanimal Jun 25 '14 at 16:52