CODEWITHSUNDEEP
jqueryuser-interfacesliderhandle
user1324638
user1324638

Reputation: 21

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.

Upvotes: 2

Views: 9713

Answers (5)

mirushaki
mirushaki

Reputation: 927

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.

Upvotes: 2

Maurix
Maurix

Reputation: 742

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

Upvotes: 0

sohaib
sohaib

Reputation: 837

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

Upvotes: 1

Karim Ahmed
Karim Ahmed

Reputation: 103

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

Upvotes: 0

Joshua Kissoon
Joshua Kissoon

Reputation: 3309

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

Upvotes: -1

Related Questions