对数滑块
use*_*773 69 javascript logarithm slider
我有一个滑块,其值介于0到100之间.
我想将它们映射到100到10,000,000的范围.
我已经看到一些功能散布在网络上,但它们都是用C++编写的.我在Javascript中需要它.
有任何想法吗？
sth*_*sth 165
你可以使用这样的函数:
function logslider(position) {
// position will be between 0 and 100
var minp = 0;
var maxp = 100;
// The result should be between 100 an 10000000
var minv = Math.log(100);
var maxv = Math.log(10000000);
// calculate adjustment factor
var scale = (maxv-minv) / (maxp-minp);
return Math.exp(minv + scale*(position-minp));
}
结果值与对数标度匹配:
js> logslider(0);
100.00000000000004
js> logslider(10);
316.22776601683825
js> logslider(20);
1000.0000000000007
js> logslider(40);
10000.00000000001
js> logslider(60);
100000.0000000002
js> logslider(100);
10000000.000000006
反向功能将,与相同的定义minp,maxp,minv,maxv和scale,计算从这样的值的滑块位置:
function logposition(value) {
// set minv, ... like above
// ...
return (Math.log(value)-minv) / scale + minp;
}
所有这些都包含在一个类中,作为一个功能代码片段,它看起来像这样:
// Generic class:
function LogSlider(options) {
options = options || {};
this.minpos = options.minpos || 0;
this.maxpos = options.maxpos || 100;
this.minlval = Math.log(options.minval || 1);
this.maxlval = Math.log(options.maxval || 100000);
this.scale = (this.maxlval - this.minlval) / (this.maxpos - this.minpos);
}
LogSlider.prototype = {
// Calculate value from a slider position
value: function(position) {
return Math.exp((position - this.minpos) * this.scale + this.minlval);
},
// Calculate slider position from a value
position: function(value) {
return this.minpos + (Math.log(value) - this.minlval) / this.scale;
}
};
// Usage:
var logsl = new LogSlider({maxpos: 20, minval: 100, maxval: 10000000});
$('#slider').on('change', function() {
var val = logsl.value(+$(this).val());
$('#value').val(val.toFixed(0));
});
$('#value').on('keyup', function() {
var pos = logsl.position(+$(this).val());
$('#slider').val(pos);
});
$('#value').val("1000").trigger("keyup");<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Input value or use slider:
<input id="value" />
<input id="slider" type="range" min="0" max="20" />- 有没有机会你有相反的功能？给定日志值,输出滑块所处的位置. (4认同)
- @NickH：取决于你如何看待它。当前，当滑块位置上升时，相关值上升得越来越快，因此从这个角度来看，它是指数级的。如果您反过来需要它，请切换 `value` 和 `position` 以获得相反的效果。 (2认同)
为了得到你想要的发行版,我认为你可以使用这个公式:
var value = Math.floor(-900 + 1000*Math.exp(i/10.857255959));
这是一个自包含的页面,它将打印您为0-100滑块获得的值,并通过它们通过该公式:
<html><body><script>
for (var i = 0; i <= 100; i++) {
var value = Math.floor(-900 + 1000*Math.exp(i/10.857255959));
document.write(value + "<br>");
}
</script></body></html>
数字从100到10,000,000,看起来像数学生锈的眼睛是你想要的分布.8-)
- 从Math.exp(i)开始并手动调整,直到数字适合.我的数学能力很弱,但我可以用英式二进制斩.8-) (4认同)
并没有完全回答这个问题,但对于感兴趣的人来说,最后一行是反向maping
return (Math.log(value)-minv)/scale + min;
只是为了记录.
注意该值必须> 0.
真正对数滑块的问题在于低端，滑块上的多个点可能会导致重复值。
从纯粹的 UI 角度来看，它也没有为用户输入提供非常直观的输出。
我认为更好的选择是使用均匀分布的“步进”变换。
换句话说，我们指定了一系列我们想要使用的增量（例如：1、10、100、1000）。然后我们根据我们定义的增量数将滑块分成相等的部分。当我们在不同的部分滑动时，滑块输出将增加相应的增量。
在上面的例子中，我们定义了我们的min, max&intervals数组。
<ExpoStepSlider
intervals={[1, 2, 5, 10, 100, 1000]}
min={1}
max={50000}
/>
然后我们必须找到我们的滑块必须具有的离散值的数量，以便它根据我们定义的间隔分布正确地从最小值到最大值。
let sliderPoints = Math.ceil(
(max - min) /
intervals.reduce((total, interval) => total + interval / intervals.length, 0)
);
在这种情况下535。
注意：您的滑块点不应超过滑块中的像素数
最后，我们只是使用上述算法转换我们的输出。该代码示例还做了一些工作，因此输出始终是当前步长间隔的四舍五入。
| 归档时间： |
|
| 查看次数： |
36218 次 |
| 最近记录： |