javascript - 如何用范围 slider 显示这种可变数据

Question

数据

amount: 10
subscriber_count: 2500

amount: 20
subscriber_count: 5000

amount: 30
subscriber_count: 10000

amount: 40
subscriber_count: 25000

amount: 50
subscriber_count: 50000

amount: 60
subscriber_count: 100000

amount: 70
subscriber_count: 200000

amount: 80
subscriber_count: 300000  

范围 slider 应根据订阅者计数移动，第一次为 2500，第二次为 5000，依此类推，并打印相对于订阅者计数的金额。对于前 3 个，它是双倍的，但在第三个之后，它是 25000，这就是它困惑的地方。我应该做什么样的计算或者有其他方法吗代码

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

slider.oninput = function() {
  output.innerHTML = this.value
}

.slidecontainer {
  width: 100%;
}

.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 25px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.slider:hover {
  opacity: 1;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  background: #4CAF50;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  background: #4CAF50;
  cursor: pointer;
}

<script></script>

<div class="slidecontainer">
  <input type="range" min="2500" max="300000" value="2500" class="slider" step="2500" id="myRange">
  <p>Subscriber: <span id="demo"></span></p>
  <p>Price: <span id="demo"></span>10</p>
</div>

Answer 1

我会设置一个包含您想要显示的值的数组:

var myValues=[2500,5000,10000,25000,50000,100000,200000,300000];

然后修改 slider 以增加/减少 1 的步长(并将其最大值设置为数组的长度 - 1)

 <input type="range" min="0" max="7" value="0" class="slider" step="1" id="myRange">

最后输出数组中的值而不是 slider 的实际值

output.innerHTML = myValues[0];
slider.oninput = function() {
  output.innerHTML = myValues[parseInt(this.value)];
}