Geek Answers Handbook

Moving a range in jQuery UI slider by dragging and dropping

I am using jQuery UI Slider in range mode. Is there a way (plugin / extension / hack) so that the user can push out the range (i.e., change both the lower and upper limits) without adding an additional button outside the slider? In some GUI widgets, this is done by dragging from the center (between two handlers).

Thanks in advance.

+4
source share
3 answers

See the question Drag the slider range of the user interface input range . There is a jQuery UI Slider widget extension for the rangeDrag function rangeDrag .

+1
source

Well, Timothy's answer does not seem to be the answer to the question that was actually posted.

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

Extending the slider from this blog post allows you to block the sliders to prevent exceeding the specified maximum range. The entire range can be moved using the handles, rather than dragging the "space" between the handles.

Finally, he did not solve my problem, but he is very close to a solution.

+1
source

If you use two text fields to reset the limit values, you need to execute the change event function, which 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], ... }); });
0
source

More articles:


All Articles