Here's my question:
How do I hold the position of a slider, while it is still being dragged?
Here's my jsFiddle: http://jsfiddle.net/timothybolton/Nbd8c/1/
Here's my situation:
I have an image which is draggable (call this "draggable image"), that sits within a parent div (call this "parent div") that controls the "draggable image"'s boundaries. The "draggable image"'s size is controlled by a slider.
The issue comes up that when I make the "draggable image" smaller, and place it near the edge of the "parent div", if I slide it to make it bigger, it will go outside of the boundaries.
That's not the desired effect. What I want, is for the slider to stop moving, and not resize it anymore.
I have done the calculations to find when it is over the edge, and they work fine. I can get the image to stop resizing, but I can't stop the slider from moving.
I have tried "disable", and "stop". But from what I can tell, "stop" only works when the user stops the event.
Any help would be greatly appreciated.
If you do a return false; in the slide event when those conditions are met, sliding will be become disabled. It will remain disabled until you move your draggable to a spot where your conditions are no longer met.
You might want to make your check conditions smarter so that the frozen slider can still be reduced even though expansion (slider increase) is prevented.