jQuery UI Slider - disable sliding on track/enable on handle mousedown

问题

I have a jQuery UI Slider, which I want to disable when a user tries to slide using the track. It should only work/enable when someone drags the handle somewhere. Clicking and trying to drag the sliding to move the handle should be disabled. I'm not sure if this can be done using unbind or mousedown event.

The problem I notice is, my handle goes from 1 to 100. When you move the start of the handle, it displays uses the ui.value. But if you try to go outside the handle and slide on the slider track, the ui.value resets its value.

So, I want to disable non-handle dragging.

回答1:

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

回答2:

This can be done useing 2 line css code!

This is HTML

<div class="SliderContainer"><div id="BGS0"></div></div>

This is JS

$('#BGS0').slider();

This is CSS

.SliderContainer {
   pointer-events: none;
   /* Other settings here */
}

.SliderContainer > .ui-slider .ui-slider-handle {
pointer-events: auto;
/* Other settings here */
}

NOTE: I used SliderContainer Class as a parent DIV, because any pointer event is disabled inside this DIV by default. Then I enabled pointer event for slider handle only. Only sliders inside parent DIV are affected by this option, because I used .SliderContainer > .ui-slider .ui-slider-handle selector.

回答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
});

回答4:

I've done it using this solution:

jQuery UI Slider - Disable click on slider track

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

回答5:

If I'm clear on your question, you don't want the slider to slide on mouse events, this should work:

$( "#slider" ).mousedown(function(){return false;}); // For mousedown
$( "#slider" ).scroll(function(){return false;}); // For scrolling with the trackpad

Also checkout the jquery events list and just substitute any event to remove this event from the slider, like:

$( "#slider" ).someEvent(function(){return false;});

To remove all events from the slider, try:

$('#slider').unbind();

来源：https://stackoverflow.com/questions/10093156/jquery-ui-slider-disable-sliding-on-track-enable-on-handle-mousedown

标签

jquery

user-interface

slider

handle