jQuery UI Slider scala logaritmica

Question

uso per cursore logaritmica questo codice 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)); 

    } 
}); 

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

} 

E #amount_min e #amount_max sono elementi di input HTML. Il codice sopra funziona perfettamente per ottenere i valori dal cursore e per inserirlo negli elementi di input.

Ma ora ho bisogno della funzione opposta a expon() - per cambiare il cursore quando cambio il valore di input. Qualcuno può aiutarmi con questo?

Answer 1

ho trovato la soluzione qui: Logarithmic slider

Ho usato il codice molto utile per un progetto ... questo è quello che ho:

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

Ho poi cambiare la mia posizione del cursore di utilizzare questo codice:

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

spero che funziona per voi :)

Answer 2

Questo è quello che ho fatto:

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

});