Jquery的UI滑塊對數刻度

我使用對數滑塊這個jQuery UI代碼：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)); 

    } 
});

的expon函數爲：

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

}

而且#amount_min和#amount_max是HTML輸入元素。上面的代碼工作得很好，可以從滑塊獲取值並將其輸入到輸入元素。

但現在我需要與expon（）相反的功能 - 當我更改輸入的值時更改滑塊。任何人都可以幫助我嗎？

來源

2011-11-06 Taras Bulgakov

你有沒有想出解決辦法？ – Homan

是的：）...得到它的工作 –

可能重複的[非線性/指數/對數步驟的JQuery UI滑塊]（http://stackoverflow.com/questions/7484695/jquery-ui-slider-with-non -linear-exponential-logarithmic-steps） – gaitat

我發現這裏的解決方案：Logarithmic slider

我用你非常有幫助的代碼爲一個項目......這就是我：

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

然後我用這個改變我的滑塊位置代碼：

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

我希望爲你工作:)

來源

2012-02-08 12:03:44

你應該將你的答案標記爲「接受」，這樣人們就會明白這是解決方案。 – IMSoP

這應該是解決方案。簡單而優雅。 – BBagi

這是我做了什麼：

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

});

來源

2012-04-19 18:03:48 capdragon

Jquery的UI滑塊對數刻度

回答

相關問題