如何根据 JavaScript 中的自定义数字更改输入值？

Question

我想根据屏幕截图中给定的自定义值更改范围值。现在我在范围变化时得到 1、2、3、4、5、6 个值，但我需要 6、12、24、36、48、60 个值。我该怎么做？

我的代码：

<div class="slidecontainer">
  <input type="range"min="1" max="6" steps="1" value="1" id="myRange">
  <p>Value: <span id="demo"></span></p>
</div>

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

slider.oninput = function() {
  output.innerHTML = this.value;
}
</script>

感谢您的努力！

Answer 1

下面的代码片段可以解决您的问题

更改 this.value 以在数组中设置值

<div class="slidecontainer">
  <input type="range"min="1" max="6" steps="1" value="1" id="myRange">
  <p>Value: <span id="demo"></span></p>
</div>

<script>
values = [6,12,24,36,48,60];
var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
output.innerHTML = slider.value;

slider.oninput = function() {
  output.innerHTML = values[this.value-1];
}
</script>

Answer 2

您可以采用数组并将所需的值存储在滑块中。

<div class="slidecontainer">
  <input type="range"min="0" max="5" steps="1" value="0" id="myRange">
  <p>Value: <span id="demo"></span></p>
</div>

<script>
var values = ["6 mo","12 mo","24 mo","36 mo","48 mo","60 mo"];
var slider = document.getElementById("myRange");
var output = document.getElementById("demo");

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

</script>

Answer 3

如果你有一个固定的范围，你可以使用这个方法。

<div class="slidecontainer">
  <input type="range"min="1" max="6" steps="1" value="1" id="myRange">
  <p>Value: <span id="demo"></span></p>
</div>

<script>
var slider = document.getElementById("myRange");


var output = document.getElementById("demo");
output.innerHTML = slider.value === "1" ? '6 mo' : slider.value;

function myFunction(pos) {
  const myMonths = [6, 12, 24, 36, 48, 60]
  return myMonths[pos - 1] + ' mo'
}


slider.oninput = function() {
  output.innerHTML = myFunction(this.value);
}
</script>

Answer 4

您可以只使用min、max和step属性来控制滑块的范围，不需要JavaScript。

此外，您的代码中有一个拼写错误。属性名称是 step 而不是 steps.

<div class="slidecontainer">
  <input type="range" min="6" max="60" step="6" value="6" id="myRange">
  <p>Value: <span id="demo"></span></p>
</div>

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

slider.oninput = function() {
  output.innerHTML = this.value;
}
</script>

如果你想在值后面加上“mo”，你可以这样做output.innerHTML = this.value + "mo";

如何根据 JavaScript 中的自定义数字更改输入值？

How to change input value as per custom numbers in JavaScript?

javascript