Question

I am using jQuery UI Slider in a div which is dragable. On clicking the slider, the event propogated and the div starts to drag! Is there a way to stop its propogation on the mouse down event?

Using return false doesn’t work to me.

$('#slider-' + boxId).slider(
    {
        step: 0.2,
        min: 0.2,
        max: 2,
        value: [1],
        stop: function( event, ui )
        {
            var value = 0.2;
            value = ui.value;
            $('#' + boxId + ' .timeText').text(value + ' secs');
            $('#' + boxId).attr('data-time' , value);
            _timeLineUtility.reCalculateAll();
            return false;
        },
        slide: function (event, ui)
        {
            return false;
        },
        start: function(event, ui) { return false; }
    });

Answer 1

event.stopPropagation()

http://api.jquery.com/event.stopPropagation/

Here is a possible duplicate – Stopping propagation of mousedown/mouseup from a click handler