jQuery UI Slider logarytmiczna skala

Question

używam na suwaku logarytmicznym ten kod 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)); 

    } 
}); 

Funkcja expon brzmi:

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

} 

And #amount_min i #amount_max html są elementy wejściowe. Powyższy kod działa dobrze, aby uzyskać wartości z suwaka i umieścić go w elementach wejściowych.

Ale teraz potrzebuję funkcji przeciwnej do funkcji expon() - aby zmienić suwak po zmianie wartości wejścia. Czy ktoś może mi w tym pomóc?

Answer 1

znalazłem rozwiązanie tutaj: Logarithmic slider

Użyłem swój kod bardzo pomocny dla projektu ... to jest to, co mam:

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

I wtedy zmienić swoje pozycje suwaka za pomocą tego Kod:

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

mam nadzieję, że pracuje dla ciebie :)

Answer 2

To właśnie zrobiłem:

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

});