jQuery UI Slider 对数刻度答案

【问题标题】：jQuery UI Slider logarithmic scalejQuery UI Slider 对数刻度
【发布时间】：2011-11-06 03:39:21
【问题描述】：

我正在将此 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() 相对的函数——当我更改输入值时更改滑块。有人可以帮我解决这个问题吗？

【问题讨论】：

你有想过这个吗？
是的 :)... 成功了
JQuery UI Slider with Non-linear/Exponential/Logarithmic steps的可能重复

标签： javascript jquery jquery-ui slider logarithm

【解决方案1】：

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

希望对你有用:)

【讨论】：

您应该将您的答案标记为“已接受”，以便提出问题的人清楚这就是解决方案。
这应该是解决方案。简洁大方。

【解决方案2】：

这就是我所做的：

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

});

【讨论】：