Display value range with jQuery slider

Question

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>

I want it to snap to the increments. Let me clarify in the posting. — Justin
– Justin, Commented Jun 25, 2014 at 2:00
i don't think its any different you just need to specify the range:true and starting positions — Shanimal
– Shanimal, Commented Jun 25, 2014 at 2:01

Community · Accepted Answer · 2017-05-23 11:43:39Z

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

edited May 23, 2017 at 11:43

CommunityBot

11 silver badge

answered Jun 25, 2014 at 2:03

Shanimal

11.8k7 gold badges67 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Justin Over a year ago

That does work, but then there are two toggles on the slider. Is there any way to have just one while keeping the range?

Shanimal Over a year ago

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. stackoverflow.com/questions/5955343/…

Shanimal Over a year ago

ok I got it jsfiddle.net/Swd9S/150 Don't hesitate to give the other guy a +1. I gave him one as well.

Justin Over a year ago

Thanks so much. I love stackoverflow and everyone that helps people like me on here!

Shanimal Over a year ago

Justin, you have to add the step value back in... (jsfiddle.net/Swd9S/151)

|

Collectives™ on Stack Overflow

Display value range with jQuery slider

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related