https://stackoverflow.com/questions/846221
-
21-08-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian题
我有一个值范围从 0 到 100 的滑块。
我想将它们映射到 100 到 10,000,000 的范围。
我在网上看到过一些函数，但它们都是用 C++ 编写的。我需要它在 JavaScript 中。
有任何想法吗？
解决方案
可以使用一个功能是这样的：
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" />
其他提示
要得到你想要的分布，我想你可以使用这个公式：
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 - ）
不太回答这个问题，但对于有兴趣的人，反向映射的最后一行是
return (Math.log(value)-minv)/scale + min;
刚记录。
请注意该值必须> 0
我正在寻找 Angular 对数滑块 但找不到任何然后我发现了这个答案，
我已经为 Angular 2+ 创建了它（演示在 Angular 6 中）： 工作演示
谢谢 @某事, ，对于片段：
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;
}
};
本发明的真实对数滑块的问题是在低端在滑块上的多个点往往会导致重复的值。
从纯粹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。
注的 ：您的滑块点应不超过滑块的像素数的
最后，我们使用上述算法只是改变我们的输出。该代码例如也做了一些工作，从而输出总是圆的当前步骤的时间间隔。
