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

【问题标题】：Logarithmic Range Input Slider - Increasing Steps in Thresholds对数范围输入滑块 - 增加阈值的步长
【发布时间】：2021-03-17 08:40:19
【问题描述】：

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

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

尝试失败
我已经尝试创建一个从 1 到 5 的滑块范围（有 4 个步骤）并插入值，但我无法让它工作，所以当小数增加时，步骤同时增加。

我也试过这个解决方案：Logarithmic slider 它比线性行为要好，但开始（左）的步骤仍然太小，最后（范围滑块的右端）太大。

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

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

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: 300, minval: 1000, maxval: 10000000});

$('#slider').on('change input', function() {
  var val = logsl.value(+$(this).val());
  // console.log(val);
  var rounded = Math.round(val / 1000) * 1000;
  var localized = rounded.toLocaleString('DE');
   $('#value').val(localized);
});

$('#value').on('keyup', function() {
  var val = +($(this).val().toString().replace(/[\D]/g,''));
  //console.log(this.value, val);
  var pos = logsl.position(val);
  //console.log(pos);
  $('#slider').val(pos);
});

$('#value').val("10000").trigger("keyup");

#slider {
  width: 300px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Input value or use slider:
<input id="value" />
<input id="slider" type="range" min="0" max="300" />

最小的步数是 1,000。在这里您可以看到，在 1,000 到 2,000 之间，大约有 20 px 的空间。但在非常高的数字上，步数高达 300,000 以上。所以不是最好的用户体验。如上图所示，您至少应该能够以 100,000 的步长输入。

【问题讨论】：

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

标签： javascript algorithm math range calculation

【解决方案1】：

为了让您开始，您可以为滑块找到合适的底座。

function updateSlider() {
    let value = +document.getElementById('value').value,
        adjusted = Math.max(Math.min(value, max), min);

    document.getElementById('slider').value = Math.log(adjusted / min) / Math.log(base);
    updateValue();
}

function updateValue() {
    const value = document.getElementById('slider').value;
    document.getElementById('value').value = (min * base ** value).toFixed(0);
}

const
    min = 1_000,
    max = 10_000_000,
    steps = +document.getElementById('slider').max,
    base = Math.pow(max / min, 1 / steps);

document.getElementById('value').addEventListener('change', updateSlider);
document.getElementById('slider').addEventListener('click', updateValue);

<input id="value" />
<input id="slider" type="range" min="0" max="20" />

【讨论】：

【解决方案2】：

不是 Javascript 编码器，所以我不会接触任何东西，但是您可以使用线性幻灯片并使用线性和对数刻度之间的转换：

// linear x to logarithmic xx
if (x>=xmin) xx=log(x/xmin)/log(xmax/xmin)
 else        xx=0.0;

// logarithmic xx to linear 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 是<0.0,1.0> 范围内的对数位置

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

我在这里不时使用这样的转换示例：

xmin=100; xmax=22050; 来自我的光谱仪应用程序。

这里 3D interpolation between curves 另一个 C++ 代码示例

【讨论】：