Geek Answers Handbook

Minimal difference in jquery slider range

I have seen some examples of what I need, but nothing responds to what I need.

I am changing the value of two elements using the ui.values slider. The difference between these values ​​cannot be less than "2".

So I used a quick formula unless (xy <2) change another change. But if the difference is less than "2", then the sliders are still moving. Anyway, to stop this?

 var sstart = $("#slidestart").text() var send = $("#slideend").text() $('#dateSlider').slider({ range: true, min: 1, minRange: 2, max: 14, step: 1, values: [ sstart, send ], slide: function( event, ui ) { if(ui.values[1] - ui.values[0] < 2){ // do not allow change alert("that is naughty"); } else { // allow change $("#slidestart").text(ui.values[0]) $("#slideend").text(ui.values[1]) } } });

Thank you: Great result.

 return false;

JS BIN EDIT

+8
jquery slider
source share
2 answers

Actually, all you have to do is replace your warning:

 return false;
+23
source share

For future reference

The accepted answer is absolutely correct and should be used in your case, but I will also give an answer to any future link.

I had a bit more restrictions, so I created an extension on top of the existing jQuery UI Slider widget. It has additional options (some of which are associated with the minimum and maximum size of the range of slides).

Check out my blog post with detailed code.

All changes apply to the range slider and include

  • setting the minimum and maximum range size
  • lower limit of the maximum allowed value
  • upper limit of the minimum acceptable value
  • automatic range movement (when reaching the maximum size, the draggable handle drags another handle to maintain the maximum range size)
+2
source share

More articles:


All Articles