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 the track.

slider set up in document.ready() as follows:

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

I tried both:

$('#navScroller').unbind('click');

and

$('#navScroller .ui-slider').unbind('click');

neither of which worked to stop the slider from responding to track clicks.

Any ideas on how to accomplish this? Thanks!

EDIT: I just discovered that using:

$('#navScroller').unbind('mousedown');

removes clicks from the whole slider, handle and all, which is closer to what i need but I still need to be able to drag the handle.

Answer 1

There's a non-JS solution to this as well, using only two lines of CSS:

/* Supress pointer events */
#navSlider { pointer-events: none; }
/* Enable pointer events for slider handle only */
#navSlider .ui-slider-handle { pointer-events: auto; }

Answer 2

@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
    });

Answer 3

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,