jQuery UI 슬라이더 - 트랙에서 슬라이딩 사용 불가/핸들 mousedown에서 사용 가능

Question

사용자가 트랙을 사용하여 슬라이드하려고 할 때 사용할 수 없도록 설정하려는 jQuery UI 슬라이더가 있습니다. 누군가가 핸들을 어딘가에 드래그하면 작동/작동 가능해야합니다. 클릭하고 슬라이딩을 드래그하여 핸들을 이동하려면 핸들을 사용하지 않아야합니다. unbind 또는 mousedown 이벤트를 사용하여이 작업을 수행 할 수 있는지 확실하지 않습니다.

내가 알아 차린 문제는 내 손잡이가 1에서 100까지 이동한다는 것입니다. 핸들의 시작을 이동하면 ui.value이 표시됩니다. 그러나 핸들 외부로 나가서 슬라이더 트랙을 슬라이드하려고 시도하면 ui.value이 값을 재설정합니다.

그래서 핸들이 아닌 드래그를 사용하지 않도록 설정하려고합니다.

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

Answer 2

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

Answer 3

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

Answer 4

것은 나는이 솔루션을 사용하여 그것을 한 적이 :이 2 라인의 CSS 코드를 useing

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

Answer 5

을 수행 할 수 있습니다!

이

는 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 */ 
} 

참고 : 나는, 부모 DIV로 SliderContainer 클래스 사용 된 포인터 때문에 이벤트는 기본적으로이 DIV 내부에서 사용 중지됩니다. 그런 다음 슬라이더 핸들에 대해서만 포인터 이벤트를 활성화했습니다. 부모 DIV 내부의 슬라이더에만 .SliderContainer > .ui-slider .ui-slider-handle 선택기를 사용했기 때문에이 옵션의 영향을받습니다.