Moving range in jQuery UI slider by dragging

Question

I am using jQuery UI Slider in the range mode. Is there a way (plugin/extension/hack) to allow the user to displace the range (i.e. change both lower and upper limit) without adding an extra button outside the slider? In some GUI widgets this is accomplished by dragging from the center (between the two handlers).

Thanks in advance.

Answer 1

Well, the answer by Timothy seems not to be an answer to the question that was actually posted.

I was also searching for something similar that Herman described and except one feature request on jQuery forum https://forum.jquery.com/topic/draggable-range-in-slider I found a blog entry which targets the same problem http://erraticdev.blogspot.com/2011/08/advanced-jquery-ui-range-slider.html

The slider extension from that blog post allows for locking slider handles to prevent exceeding a defined maximal range. The entire range can be moved using handles, not by dragging the "space" between handles.

Finally it didn't resolve my problem but it is very close to the solution.

Answer 2

If you're using two text boxes to re-set the limit vars, then you need to do a change event function that detects any changes.

$('#rangeMod input:text').change(function() {

  // set range vars based on new input (you should also validate for (INT)).
  var txtbox1 = '...'; // based on first text box
  var txtbox2 = '...'; // based on second text box

  var range = [txtbox1, txtbox2];

  $('#my-slider')
     .slider("destroy") /* Destroy it Before Rebind/Re-Init */
     .slider({range:true, min: range[0], max: range[1], ... });
});