jquery UI 슬라이더의 최소, 최대 값을 어떻게 동적으로 변경합니까?

Question

그래서 나는 다음으로 초기화 그것에 JQuery와 UI 슬라이더가있는 페이지가 있습니다

var min = $("#attrInformation").data("lowest_price"), 
max = $("#attrInformation").data("highest_price"); 

    $("#slider-range").slider({ 
     range: true, 
     min: min, 
     max: max, 
     values: [ min, max ], 
     slide: function(event, ui) { 
      var start = ui.values[0], 
      end = ui.values[1]; 

      $("#startPrice").text(start); 
      $("#endPrice").text(end); 
     }, 
     stop: function(event,ui){ 
      var start = ui.values[0], 
      end = ui.values[1]; 

      refineObject.price_min = start; 
      refineObject.price_max = end; 

      refineResults(refineObject); 
     } 
    }); 

을하고 난 두 개의 손잡이가 기반에있는의 최소, 최대, 그리고 값을 변경할 수 있도록하려면 아약스 호출 결과 이 같은 내가 해봤 뭔가 :

내 최소 및 최대 클래스 start_price 및 end_price 두 개의 숨겨진 된 div에 포함되어

$.get("ajax.php",options,function(data){ 
    $('.middle_container').html(data);   

    $('#slider-range').slider("option", "min", $('.middle_container').find('.start_price').val()); 
    $('#slider-range').slider("option", "max", $('.middle_container').find('.end_price').val()); 
    $('#slider-range').slider("value", $('#slider-range').slider("value")); 

     }); 

. 이것은 현재 작동하지 않습니다, 그것은 최대 가격을 업데이 트하지 않으며 슬라이더의 오른쪽 핸들이 왼쪽에서 벗어난 위치에 나타납니다. 이 작품을 만드는 방법에 대한 제안? 나는 백엔드를 위해 PHP를 사용하고있다. start_price 및 end_price 코드가 올바로 작동하고 정확합니다.

Answer 1

$('.middle_container').find('.start_price').val()과 $('.middle_container').find('.end_price').val()이 올바른 값을 반환하는지 확인하십시오. 또한 슬라이더의 값을 설정하려면 최소/최대 값 설정과 동일한 구문을 사용해야합니다. 또한

이

$.get("ajax.php",options,function(data){ 
    $('.middle_container').html(data);   

    $('#slider-range').slider("option", "min", $('.middle_container').find('.start_price').val()); 
    $('#slider-range').slider("option", "max", $('.middle_container').find('.end_price').val()); 
    $('#slider-range').slider("option", "value", $('#slider-range').slider("value")); 

}); 

Answer 2

완전히 슬라이더 기능을 제거 먼저 슬라이더를 파괴 시도. 그러면 요소가 초기화 전 상태로 돌아갑니다.

$("#selector").slider("destroy"); 

그 후 당신은 같은 슬라이더에이 작동

$("#selector").slider({ 
    range: "max", 
    min: 0, // min value 
    max: 200, // max value 
    step: 0.1, 
    value: 200, // default value of slider 
    slide: function(event, ui) { 
     $("#amount").val(ui.value); 
    } 
});​ 

를 새 값을 추가 할 수 있습니다.

Answer 3

이렇게 입력 값을 변경하려면이 작업을 수행 할 수 있습니다.

$('#inputid').focusout(function() { 

    // slider destroy and create as Shailesh showed 
}); 

내가 대신 초점의의 keyup 사용하려고했지만, 당신이 만드는 내부 점검에 따라, 당신은 당신의 슬라이더를 당신이 늘 당신이 이동 될 때까지 사용 등의 혜택되지 않을 것 여러 번 재건 끝낼 수 있었다 입력으로부터.