I'm using this jQuery UI code use for a logarithmic slider:
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));
}
});
The expon
function is:
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
and #amount_max
are HTML input elements. The code above works just fine to get values from the slider and to put them to the input elements.
But now I need the function opposite to expon()
— to change the slider when I change the values of the inputs. Can anybody help me with this?
I found the solution here: Logarithmic slider
I've used your very helpful code for a project... this is what I have:
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 then change my slider positions using this code:
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)] });
I hope that works for you :)