Setting a jQuery slider maximum value to unlimited?

Question

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).

Answer 1

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

Answer 2

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--);
      }
   }
});

Answer 3

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)

Answer 4

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.