jquery UI Slider Logarithmic quy mô

Question

tôi sử dụng cho thanh trượt logarit mã này jquery UI:

var minVal = 10; var maxVal = 100; $("#slider").slider({ 
    range: true, 
    min: minVal, 
    max: maxVal/2, 
    values: [ minVal, maxVal ], 
    slide: function(event, ui) { 
     $("#amount_min").val(Number(expon(ui.values[ 0 ], minVal, maxVal)).toFixed(0)); 
     $("#amount_max").val(Number(expon(ui.values[ 1 ], minVal, maxVal)).toFixed(0)); 

    } 
}); 

Chức năng expon là:

function expon(val, min,max) 
{ 

     var minv = Math.log(min); 
     var maxv = Math.log(max); 
     max = max/2; 

     // calculate adjustment factor 
     var scale = (maxv-minv)/(max-min); 

     return Math.exp(minv + scale*(val-min)); 

} 

Và #amount_min và #amount_max là những yếu tố đầu vào html. Đoạn mã trên chỉ hoạt động tốt để lấy các giá trị từ thanh trượt và đặt nó vào các phần tử đầu vào.

Nhưng bây giờ tôi cần hàm ngược lại với hàm expon() - để thay đổi thanh trượt khi tôi thay đổi giá trị của đầu vào. Ai có thể giúp tôi với điều này?

Answer 1

Tôi tìm thấy giải pháp ở đây: Logarithmic slider

Tôi đã sử dụng mã rất hữu ích của bạn cho một dự án ... Đây là những gì tôi có:

var gMinPrice = 100; 
var gMaxPrice = 1000; //in my project these are dynamic 

function expon(val){ 
    var minv = Math.log(gMinPrice); 
    var maxv = Math.log(gMaxPrice); 
    var scale = (maxv-minv)/(gMaxPrice-gMinPrice); 
    return Math.exp(minv + scale*(val-gMinPrice)); 

} 
function logposition(val){ 
    var minv = Math.log(gMinPrice); 
    var maxv = Math.log(gMaxPrice); 
    var scale = (maxv-minv)/(gMaxPrice-gMinPrice); 
    return (Math.log(val)-minv)/scale + gMinPrice; 
} 

sau đó tôi thay đổi vị trí thanh trượt của tôi sử dụng này mã:

var gBudgetBottom, gBudgetTop; 
$('#priceSlider').slider({ 
    change: function(event, ui){ // inside your slider instance 
     gBudgetBottom = Number(expon(ui.values[0])).toFixed(0); 
     gBudgetTop = Number(expon(ui.values[1])).toFixed(0); 
    } 
} 

$('#priceSlider').slider({ values: [Number(logposition(gBudgetBottom)).toFixed(0), Number(logposition(gBudgetTop)).toFixed(0)] }); 

tôi hy vọng rằng làm việc cho bạn :)

Answer 2

Đây là những gì tôi đã làm:

var resStepValues = [0, .01, .02, .03, .04, .05, 1, 1.5, 2, 3, 4, 5, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 150, 200, 250, 300, 500, 750, 1000, 1500]; 

var slider = $("#resolution_slider").slider({ 
    animate: true, 
    min: 0, 
    max: 29, 
    range: 'min', 
    values: [0, 29], 
    slide: function (event, ui) { 

     if (ui.values[0] > ui.values[1]) { 
      $("#txtMaxRes").val(resStepValues[ui.values[1]]); 
      $("#txtMinRes").val(resStepValues[ui.values[0]]); 

     } else { 
      $("#txtMaxRes").val(resStepValues[ui.values[0]]); 
      $("#txtMinRes").val(resStepValues[ui.values[1]]); 
     } 
    } 

});