Jquery UI : 범위 슬라이더입니다. 어떤 슬라이더가 움직입니까? 이 데모 페이지에서

Question

가 : http://jqueryui.com/demos/slider/#event-change 이벤트 '슬라이드'재 작성은 두 번에 입력이

: 내가 알고 싶은 나의 목적을 위해

$("#amount").val("$" + $("#slider-range").slider("values", 0) + 
      " - $" + $("#slider-range").slider("values", 1)); 

두 개의 슬라이더 중 어느 이동 (최소 또는 최대) . 나는 그것을 어떻게 얻을 수 있는가?

Answer 1

@Nikoole는 슬라이딩되는 핸들을 찾을 수있는 특별한 방법이 없다, 그러나 당신은이 트릭이 도움이 될

var minSlide = 75, maxSlide = 300; 
$("#slider-range").slider({ 
    range: true, 
    min: 0, 
    max: 500, 
    values: [ 75, 300 ], 
    slide: function(event, ui) { 
     if(minSlide != parseInt(ui.values[0], 10)){ 
      // Do what in minimum handle case 
     } 
     else if(maxSlide != parseInt(ui.values[1], 10)) { 
      // Do what in maximum handle case 
     } 
    }, 
    stop: function(event, ui){ 
     minSlide = parseInt(ui.values[0], 10); 
     maxSlide = parseInt(ui.values[1], 10);    
    } 
}); 

희망을 시도 할 수 있습니다.

Answer 2

나는 최근에도 같은 문제에 직면했습니다. 범위 슬라이더를 사용할 때 어느 슬라이더 (오른쪽 또는 왼쪽)가 이동되었는지 확인해야합니다. 이 없으므로 직접 방법을 결정할 수 있지만 ui 개체에는 어떤 슬라이더가 이동되었는지 확인하는 데 사용할 수있는 value 및 values 속성이 있습니다. 다음은 나를 위해 일한 솔루션입니다 : -

 $("#slider-range").slider({ 
     range: true, 
     min: 75, 
     max: 300, 
     values:[75,300], 
     slide: function(event, ui) { 
     target_name = '' 
     if(ui.values[0] == ui.value) target_name = 'min_price' 
     else if(ui.values[1] == ui.value) target_name = 'max_price' 
     alert(target_name) 
     } 

Answer 3

내가 슬라이더 API http://api.jqueryui.com/1.8/slider/#event-create에 의해 정의 된 이벤트를 만들에 아이디 min으로 속성과 최대 선택기를 설정하여이 문제를 해결했다. 다시 내 slide 경우에 다음

  create:function(event, ui) 
     { 
     var handlers = $('.ui-slider-handle'); 
     $.each(handlers, function(i, element) 
     { 
      if(i == 0) 
       $(element).attr('id', 'slider-handler-min'); 
      else 
       $(element).attr('id', 'slider-handler-max'); 
     }); 
     } 

... 그리고 이동하는 하나 얻을 ui.handler에서 단순히 빨간색 ID 속성 :

Answer 4

오른쪽 슬라이더 핸들러는 달리, 슬라이더 컨테이너의 마지막 아이는, 그래서 왼쪽 핸들러, 오른쪽 핸들러가 nextSibling을 가지고 있지 않음 :

$('#slider-range').slider({ 
    range: true, 
    min: 0, max: 500, 
    values: [ 75, 300 ], 
    slide: function(event, ui) { 
     if (ui.handle.nextSibling) { 
      // Moving LEFT slider ... 
     } else { 
      // Moving RIGHT slider ... 
     } 
    } 
}); 

Answer 5

슬라이드 이벤트는 event와 ui의 두 매개 변수를 사용합니다. ui는 핸들 객체를 포함합니다. 다음과 같이 핸들 인덱스에 액세스하고 테스트 할 수 있습니다.

$("#slider-range").slider({ 
    range: true, 
    min: 0, 
    max: 500, 
    values: [ 75, 300 ], 
    slide: function(event, ui) { 
     var index = $(ui.handle).index(); 
     if (index == 1) { 
      // do stuff for minimum 
     } 
     if (index == 2) { 
      // do stuff for maximum 
     } 
    } 
}); 

이것은 주어진 슬라이더의 핸들 수에 관계없이 작동합니다. 그러나 인덱스는 1이 아닌 0부터 시작합니다.