CODEWITHSUNDEEP
jqueryjquery-uijquery-ui-draggable
cycero
cycero

Reputation: 4761

jQuery UI Range Slider - move the right dragger (handle) when clicked in the middle of the slider

I'm using the jQueryUI range slider in the following way:

$(function() {
    $( "#slider-range" ).slider({
        range: true,
        min: 0,
        max: 4,
        step: 1,
        values: [ 0, 4 ],
        slide: function( event, ui ) {
            $( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
        }
    });
    $( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) +
        " - $" + $( "#slider-range" ).slider( "values", 1 ) );
});

What I need to do is - move the right side dragger (handle) to the clicked position when you click in the middle of the slider. Currently, when you click in the middle, the left dragger (handle) is being dragged to that position. Is there a way I can swap that behavior?

Thanks for helping!

Upvotes: 0

Views: 1914

Answers (2)

Hashcut
Hashcut

Reputation: 843

I know this is an old question, but I was running into the same problem and figured out an easier way to handle it. Basically, you need to disable pointer events on the slider itself, enable them on the handles, and then attach a 'click' event to a container div that manually moves your slider. Here are the steps:

Assume this html:

<div class="container-outer">
   <div class="container-inner">
     <div class="jquerySlider">
     </div>
   </div>
</div>

The CSS would like this:

.container-inner {
pointer-events: none;
}

.container-inner .ui-slider .ui-slider-handle {
    pointer-events: auto;
}

Your javascript would look like this:

'click .container-outer': function(event) {
   event.preventDefault();
   var clickPosition = event.offsetX;
   var clickPercentage = event.offsetX / event.currentTarget.offsetWidth;
   var sliderMax = $('.jquerySlider').slider("option","max");
   var newPosition = sliderMax * clickPercentage;
   $('.jquerySlider').("values",1,newPosition);
}

The upside is you avoid messing with the jquery code. Plus, events on the handles themselves still function normally.

The downside is that you must handle the slider clicks yourself, manually. But as shown above, this isn't that hard to do.

Anyway, hope this is useful for others running into this problem.

Upvotes: 1

Jonathan Rowny
Jonathan Rowny

Reputation: 7588

That's actually not how it works, although it may appear that way. It actually detects which handle is closest, and choose that one. Each time you click, the distance from BOTH handles, in pixels, is calculated. It's easier to see the functionality with MORE range, see this fiddle I made: http://jsfiddle.net/gm5nm/

Here is the function jQueryUI uses:

this.handles.each(function( i ) {
var thisDistance = Math.abs( normValue - self.values(i) );
if ( distance > thisDistance ) {
distance = thisDistance;
closestHandle = $( this );
index = i;
}
});

source: Line 249 of jquery.ui.slider.js

In general, I think this is usable. Overriding this properly may be a bit difficult because it's inside an anonymous function inside another method which contains a bunch of logic. You COULD, and I really really really don't recommend it, but you COULD modify the source and just set the closest handle to the 2nd. But seriously, don't do that. It's a very bad habbit.

Upvotes: 1

Related Questions