Làm cách nào để tự động thay đổi giá trị tối thiểu, tối đa cho thanh trượt jquery ui?

Question

Vì vậy, tôi có một trang với một thanh trượt jquery ui vào nó khởi tạo như sau:

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

và tôi muốn để có thể thay đổi min, max, và giá trị mà hai tay cầm đang Dựa về kết quả của cuộc gọi ajax. một cái gì đó vì vậy tôi đã cố gắng như thế này:

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

     }); 

nơi min và max của tôi được chứa trong hai divs ẩn với lớp start_price và end_price. điều này hiện không hoạt động, nó không cập nhật giá tối đa và tay cầm bên phải của thanh trượt xuất hiện ở bên trái của vị trí. bất kỳ đề xuất nào về cách thực hiện công việc này? Tôi đang sử dụng php cho backend. mã start_price và end_price đang hoạt động và chính xác.

Answer 1

Đảm bảo $('.middle_container').find('.start_price').val() và $('.middle_container').find('.end_price').val() đang trả về các giá trị phù hợp. Ngoài ra để đặt giá trị của thanh trượt, bạn phải sử dụng cùng cú pháp mà bạn đang sử dụng để đặt giá trị tối thiểu/tối đa. Cũng

Hãy thử điều này

$.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

Phá hủy các thanh trượt đầu tiên, mà loại bỏ các chức năng trượt hoàn toàn. Điều này sẽ trả về phần tử trở về trạng thái trước init của nó.

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

Sau đó bạn có thể thêm những giá trị mới cho thanh trượt như,

$("#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); 
    } 
});​ 

này hoạt động.

Answer 3

Nếu bạn muốn làm điều này trên một giá trị đầu vào thay đổi, bạn có thể làm một cái gì đó như thế này.

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

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

tôi sẽ sử dụng KeyUp thay vì tập trung, nhưng tùy thuộc vào kiểm tra nội bộ bạn thực hiện, bạn có thể sẽ xây dựng lại thanh trượt của bạn nhiều lần mà sẽ không có một lợi ích như bạn sẽ không sử dụng nó cho đến khi bạn di chuyển trên từ đầu vào.