javascript jQuery UI 滑块对数刻度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8025095/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery UI Slider logarithmic scale
提问by Taras Bulgakov
I'm using this jQuery UI code use for a logarithmic 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));
}
});
The exponfunction is:
该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_minand #amount_maxare HTML input elements. The code above works just fine to get values from the slider and to put them to the input elements.
#amount_min和#amount_max是 HTML 输入元素。上面的代码可以很好地从滑块获取值并将它们放入输入元素。
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?
但现在我需要相反的功能expon()- 在我更改输入值时更改滑块。有人可以帮我解决这个问题吗？
回答by ness-EE
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 :)
我希望这对你有用:)
回答by capdragon
This is what i did:
这就是我所做的：
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]]);
}
}
});
