StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POSlide entire jQuery slider range
text
Body
copied!<p>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.</p> <p>A user is forced to set values like the following:</p> <pre><code>0,600 15,120 240,255 150,150 </code></pre> <p>When, I want a user to be able to set values like the following:</p> <pre><code>1,271 15,165 25,115 580,595 </code></pre> <p>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. </p> <p>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: <a href="http://jsfiddle.net/JhKxh/9/" rel="nofollow">http://jsfiddle.net/JhKxh/9/</a></p> <p>*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).</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload