Javascript 对数范围输入滑块-增加阈值中的步长

摘要
我需要一个从1000到10000000的数字范围输入。由于范围大，它不能是线性的。因此，每次小数长度增加（例如，从1000增加到10000），步长也应该增加

#--------------------#--------------------#--------------------#--------------------#
0  1000   5000  9000 10,000    56,498  100,000    500,000   1,000,000          10,000,000

尝试失败
我已经尝试创建一个从1到5的滑块范围（有4个步骤）并对值进行插值，但我无法使其工作，因此当小数点增加时，步骤同时增加

我还尝试了这个解决方案： 这比线性行为好，但开始（左）的步数太小，结束（范围滑块的右端）的步数太大

附加要求
此范围滑块还必须连接到输入字段。因此，输入值也必须写回滑块（因此，某种反向计算输入范围滑块）

上面链接的对数滑块解决方案的调整版本：

功能日志滑块（选项）{
选项=选项| |{}；
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={
//从滑块位置计算值
值：功能（位置）{
返回Math.exp（（position-this.minpos）*this.scale+this.minlval）；
},
//根据值计算滑块位置
位置：功能（值）{
返回this.minpos+（Math.log（value）-this.minlval）/this.scale；
}
};
//用法：
var logsl=新的日志滑块（{maxpos:300，minval:1000，maxval:10000000}）；
$（“#滑块”）。在（'change input'，function（）上{
var val=logsl.value（+$（this.val（））；
//控制台日志（val）；
var四舍五入=数学四舍五入（val/1000）*1000；
var本地化=四舍五入的toLocaleString（'DE'）；
$（'#value'）.val（本地化）；
});
$（'#value'）。在（'keyup'，function（）上{
var val=+（$（this.val（）.toString（）.replace（/[\D]/g'）；
//console.log（this.value，val）；
var pos=对数位置（val）；
//控制台日志（pos）；
$（'滑块'）.val（位置）；
});
$（'#value'）.val（“10000”）.trigger（“keyup”）
#滑块{
宽度：300px；
}

输入值或使用滑块：
要开始，您可以为滑块找到正确的底座


函数updateSlider（）{
让value=+document.getElementById（'value'）.value，
调整=数学最大值（数学最小值，最大值，最小值）；
document.getElementById（'slider'）。value=Math.log（已调整/min）/Math.log（基本）；
updateValue（）；
}
函数updateValue（）{
常量值=document.getElementById（'slider'）。值；
document.getElementById（'value'）.value=（最小*基**值）.toFixed（0）；
}
常数
最小值=1_000，
最大值=10_000_000，
步骤=+document.getElementById（'slider'）.max，
基本=数学功率（最大/最小，1/步）；
document.getElementById（'value'）.addEventListener（'change'，updateSlider）；
document.getElementById（'slider'）。addEventListener（'click'，updateValue）
不是Javascript编码器，因此我不会涉及任何内容，但是您可以使用线性幻灯片并使用线性和对数刻度之间的转换：

//线性x到对数xx
如果（x>=xmin）xx=log（x/xmin）/log（xmax/xmin）
否则xx=0.0；
//对数xx到线性x
x=exp（xx*log（xmax/xmin））*xmin；

其中
xmin，xmax
是您的范围注意它不能包含零例如：

xmin=1.0;
xmax=10000000.0;

xmin
可以是大于
0
的任何值，例如
0.001
和
xmax
必须大于
xmin
通常
xmin*pow（10，？）

因此
x
是滑块从
xmin
到
xmax
的线性位置，
xx
是范围内的对数位置

因此，您只需将
xx
乘以视图/滑块的像素分辨率即可得到
[pixels]

我使用像这样的转换时间在这里举个例子：


其中
xmin=100；xmax=22050来自我的分光镜应用程序

另一个例子是C++代码< /p>你要多少步？你的最小值和最大值的对数（基10）等于3和7。我不明白你所说的“太小和太大”是什么意思。太小，太大，4个步骤-我真的无法想象你到底尝试了什么。@NinaScholz理想情况下，滑块在像素中是宽的。我更新了描述并添加了链接解决方案中的自定义代码段，以更好地解释问题。希望它能澄清一些事情！