CODEWITHSUNDEEP
javascriptjquery
Walker
Walker

Reputation: 134453

Setting a jQuery slider maximum value to unlimited?

Can you set a jQuery slider to have a maximum value of 10,000 - but then if moved at all to the left it scales as though it was a slider of between 1-50 (if they move it to the right it returns to the very high value).

So it would be something like:

min: 0, max: 50, secondmax: 10000, (<- this is what I need to figure out). values: [0, 50, 10000],

We have a filter by distance slider on our job board and want it, by default to be unlimited - and then if the user moves the slider left it should scale between reasonable values (1-50).

Upvotes: 1

Views: 1753

Answers (4)

treeface
treeface

Reputation: 13341

Sure, why not? If you wanted to do this, you could run a function every time the slider changes. In this function, you can check the value of the current position. If it's less than 50, change the slider as you need. If it's above 50, same.

Upvotes: 1

Chris Cherry
Chris Cherry

Reputation: 28554

Probably easier to handle this outside of the slider itself, for example:

You could make the slider something like 1-51. In your code for the distance filter detect a value >50 and make it perform the unlimited distance filtering (possibly just by replacing the value of 51, with 10,000)

Upvotes: 4

Mechlar
Mechlar

Reputation: 4974

In the slide: function(e, ui){...} you could detect what the current value is (ui.value) and if ui.value > max then change the max. It would look something like this:

var $mySlider = $('#mySlider');
$mySlider.slider({
   slide: function(e, ui){
      var currMax = $mySlider.slider('option', 'max');
      if (ui.value > currMax) {
         $mySlider.slider('option', 'max', currMax++)
      }
   }
});

Or like this:

var $mySlider = $('#mySlider');
$mySlider.slider({
   slide: function(e, ui){
      var currMin = $mySlider.slider('option', 'min');
      var currMax = $mySlider.slider('option', 'max');
      if (ui.value >= currMax) {
         $mySlider.slider('option', 'min', currMin++);
         $mySlider.slider('option', 'max', currMax++);
      } else if (ui.value <= currMin){
         $mySlider.slider('option', 'min', currMin--);
         $mySlider.slider('option', 'max', currMax--);
      }
   }
});

Upvotes: 4

SLaks
SLaks

Reputation: 887413

It would probably be more intuitive to your users to use a normal slider and an 'Unlimited' checkbox.

Upvotes: 1

Related Questions