指数增长<input />

Question

基本上，我有一个<input type="range" ...>，我想分成四个部分。

1. 从0到10 000; step=1000
2. 从10 000到10万; step=10 000
3. 从10万增加到1 000 000; step=100 000
4. 从1 000 000增加到1 000 000 000; step= 10 000 000

我认为操纵范围会相当容易，但不知怎的，我需要在单个范围输入中相当于四个不同的min和max。我知道这可能是用一些对数或指数公式来完成的，但数学并不是我的力量。



我处于React环境中，但我并不特别需要使用勺子代码，只是对如何执行此操作的模糊概念。

Answer 1

非常基本的想法是将你的范围分为4个，最小值为0，最大值为37，步长为1.每当你做一个改变时，你的值乘以你的自定义步长值：

var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
output.innerHTML = slider.value;

slider.oninput = function() {
  
  if (this.value <= 10){
  	output.innerHTML = this.value * 1000;
  } else if (this.value > 10 && this.value <= 19) {
  	output.innerHTML = (this.value - 9) * 10000;
    
  } else if (this.value > 19 && this.value <= 28){
  	output.innerHTML = (this.value - 18) * 100000;
  } else {
  	output.innerHTML = (this.value - 27) * 1000000;
  }
}

.slider{ 
  width: 100%;
}

<div id="slidecontainer">
  <input type="range" min="0" max="37" value="0" step='1' class="slider" id="myRange">
  <p>Value: <span id="demo"></span></p>
</div>