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

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"));