2

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.

4

5 回答 5

2

这可以使用 2 行 css 代码来完成！

这是 HTML

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

这是JS

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

这是 CSS

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

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

注意：我使用 SliderContainer 类作为父 DIV，因为默认情况下在此 DIV 内禁用任何指针事件。然后我只为滑块句柄启用了指针事件。只有父 DIV 中的滑块受此选项影响，因为我使用了.SliderContainer > .ui-slider .ui-slider-handle选择器。

于 2015-04-25T09:33:17.703 回答
1 
  $("#range-amount").slider({ disabled: true });
于 2013-07-06T08:58:59.247 回答
0

我已经使用这个解决方案完成了它：

jQuery UI Slider - 禁用单击滑块轨道

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"));
于 2013-07-08T13:06:33.603 回答
0

我也遇到了同样的问题，除非我决定从 jquery ui 本身中删除句柄，否则我找不到任何解决方案

在ui.slider.js中，注释此行。

// 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
});
于 2012-08-13T08:46:21.257 回答
-1

如果我对您的问题很清楚，您不希望滑块在鼠标事件上滑动，这应该可以：

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

还要检查 jquery 事件列表并替换任何事件以从滑块中删除此事件，例如：

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

要从滑块中删除所有事件，请尝试：

$('#slider').unbind();
于 2012-04-10T17:11:10.667 回答