输入范围值的指数增长答案

【问题标题】：Exponential growth of input range values输入范围值的指数增长
【发布时间】：2022-04-05 10:43:47
【问题描述】：

当您使用 HTML 输入元素定义范围时，例如：

<input type="range" min="1" max="1000" value="100" name="distance"/>

是否有可能让价值呈指数增长？例如，如果您在左侧附近滑动一点点，它将产生 1 到 2 的差异（例如英里距离），但是如果您在右侧滑动相同的量，它将使 900 英里和 1000 英里有所不同。

你知道我的意思吗？因为中间是 500 是不公平的，然后你永远无法将它微调到 20 或 40 之类的东西，但另一方面，如果你往上走，将它微调到 820 的差异越来越小或 840。

我希望我的问题很清楚。提前致谢。

【问题讨论】：

有可能是的。是否可以使用纯 HTML：否。

标签： html html-input

【解决方案1】：

HMTL

<input id="distanceRange" type="range" name="distance" min="0" max="100" value="0">

<output id="distanceOutput">1</output>

javascript

document.getElementById("distanceRange").oninput = function(){
  document.getElementById("distanceOutput").value = Math.round(Math.exp((Math.log(1000)/100) * document.getElementById("distanceRange").value));
};

【讨论】：

【解决方案2】：

您应该监听此范围的“输入”事件，获取值并使用 javascript 计算指数。您可以将值范围设置为 0..100 以简化操作。

【讨论】：

【解决方案3】：

由于 HTML 范围输入有一个常数 step（默认步长为 1），因此变化是线性的。

如果您想要其他变化方法，例如 2 的 n 次方、八度或斐波那契，您可以动态更改 step，但浏览器的默认拖动行为可能不支持您这样做。

或者你可以结合使用各种元素来完成任务：

<input type="range">控制当前值的因子
<datalist> 显示因子滑块的标尺
<meter> 可视化当前值
<output> 将当前值显示为文本

以FFT Size为例：

fftSize 必须是 2^5 和 2^15 (32 ~ 32768) 之间的 2 的幂，默认为 2048

let $ = (s, c = document) => c.querySelector(s);

function main(){
  let input = $('input[name="fftSizeFactor"]');
  let meter =  $('meter[name="fftSize"]');
  let output = $('output[name="fftSize"]');

  input.addEventListener('input', (e) => {
    // regard the factor as exponent of current value
    let exponent = e.target.value;
    output.value = meter.value = Math.pow(2, exponent);
  });
  input.dispatchEvent(new Event('input'));
  input.addEventListener('change', (e) => {
    console.debug('fftSize changed to', output.value);
  });
}
document.addEventListener('DOMContentLoaded', main);

input[name="fftSizeFactor"]{
  width: 60px;
  transform: rotate(-90deg);
}
meter[name="fftSize"]{
  width: 360px;
}

<h3>Exponential Slider Example</h3>

<div>
  fftSize:
  <input type="range" name="fftSizeFactor" min="5" max="15" value="11"
      list="fftSizeList" autocomplete="off" />
  <meter name="fftSize" min="32" max="32768" value="2048"></meter>
  <output name="fftSize">2048</output>
  <datalist id="fftSizeList">
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
    <option value="11">11</option>
    <option value="12">12</option>
    <option value="13">13</option>
    <option value="14">14</option>
    <option value="15">15</option>
  </datalist>
</div>

【讨论】：