javascript - jQuery UI Slider对数刻度

我正在将这个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()相反的功能-在更改输入值时更改滑块。有人可以帮我吗？

最佳答案

我在这里找到解决方案: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)] });

我希望这对您有用:)

EXPON

javascript - jQuery UI Slider对数刻度