jQuery UI Slider - Disable click on slider track

Question

I\'m trying to find a way to disable the click on my jQuery UI Slider\'s track. Clicking on the handle is ok but I do not want the handle to respond if the user clicks on t

Answer 1

This should take care of it.

/**
 *  Turns off the track click for the given slider control
 */

function disableSliderTrack($slider){

    $slider.bind("mousedown", function(event){

        return isTouchInSliderHandle($(this), event);   

    });

    $slider.bind("touchstart", function(event){

        return isTouchInSliderHandle($(this), event.originalEvent.touches[0]);

    });
}

function isTouchInSliderHandle($slider, coords){

    var x = coords.pageX;
    var y = coords.pageY;

    var $handle = $slider.find(".ui-slider-handle");

    var left = $handle.offset().left;
    var right = (left + $handle.outerWidth());
    var top = $handle.offset().top;
    var bottom = (top + $handle.outerHeight());

    return (x >= left && x <= right && y >= top && y <= bottom);    
}


    disableSliderTrack($(".ui-slider"));

Answer 2

As JQuery already bound your container (slider) div with mouse down event, so even if you unbind your range div from it, it'll still fire on the container div,

here's the solution:

$('#navScroller .ui-slider-range').mousedown(function() {
      return false;
});

Regards,

Answer 3

I also had the same problem and i could not find any solution unless i decided to remove the handle from jquery ui itself

In ui.slider.js, Comment this lines. // Bind the click to the slider itself

this.element.bind('mousedown.slider', function(e) {
   self.click.apply(self, [e]);
   self.currentHandle.data("mouse").trigger(e);
   self.firstValue = self.firstValue + 1; //This is for always triggering the change event
});

Answer 4

Heh, more than 2 years, but, here is my solution:

$('a.ui-slider-handle').on('click',function(e){
    e.stopImmediatePropagation();
    return false;
});

Answer 5

Try this:

$("#slider").slider({ disabled: true });

Answer 6

@btate has the right idea (abandoning mousedown/touchstart that don't originate in the slider handle), but there is an easier way to get there. jQuery's event object will tell you which element initiated the event.

var sliderMouseDown = function (e) { // disable clicks on track
    var sliderHandle = $('#navScroller').find('.ui-slider-handle');
    if (e.target != sliderHandle[0]) {
        e.stopImmediatePropagation();
    }
};

$('#navScroller')
    .on('mousedown', sliderMouseDown)
    .on('touchstart', sliderMouseDown)
    .slider({
          value: 0,
          start: onNavScrollStart,
          slide: onNavScrollSlide,
          animate: slideSpeed,
          max: slideWidth
    });