I have a multi-value jQuery slider with a defined step (it is defined by another slider, lets pretend for example’s sake that it is a step:15) and a range of say 0-600. I want users to be able to drag the two values to the left and right like usual. But if a click is performed inside of the two values, they should be able to drag the whole range left and right.
A user is forced to set values like the following:
0,600
15,120
240,255
150,150
When, I want a user to be able to set values like the following:
1,271
15,165
25,115
580,595
These numbers still follow the step:15 rule of the slider, but can’t be accessed with the basics of a jQuery slider because it wants to snap values to 30 increments (0,15,30,..,585,600). The most intuitive way I can think of this to be done is letting a user drag their ‘range’ of values left and right. But when the slider is clicked in between the two values, jQuery sets this as a new value.
I have used the slider’s start event to detect if a user is clicking within the range (instead of clicking on a handle or the un-selected portion of the slider). I then need to set some sort of slide function within the slider that constantly detects the mouse position and slides left and right like that. I am at an intermediate level of Javascript (in my opinion) and not quite sure how I would go about doing that. You can play with my JSFiddle:
http://jsfiddle.net/JhKxh/9/
*note: the only problem with my JSFiddle is if you click the slider’s border, it doesn’t count as the class ui-slider-range (but some CSS tweaking should be able to fix this).
your answer should be here
Drag the Range of a UI Input Range Slider