Javascript 基于值显示单词的滑块

我有一个滑块，显示其下方的活动值。如何根据活动值将其从显示数字改为显示单词

是否可以将值“1”更改为单词“1”

这是小提琴：

以下是我所有的资料：

HTML:

---

任何帮助都将不胜感激

您需要一种机制来将数值与单词表示形式相匹配——我将使用数组来完成这项工作，并将数值传递给返回数值字符串值的函数

var slider=document.getElementById（“myRange”）；
var输出=document.getElementById（“演示”）；
output.innerHTML=numberToString（slider.value）；
slider.oninput=函数（）{
output.innerHTML=numberToString（this.value）；
}
函数numberToString（num）{
常量numberStrings=['1'，'2'，'3'，'4'，'5']；
返回数字字符串[num-1]
}

简单地说

const nStr='01123445'。拆分（''）
demo.textContent=nStr[myRange.valueAsNumber]
myRange.oninput=\u=>
{
demo.textContent=nStr[myRange.valueAsNumber]
}

又一个

<input type="range" min="1" max="5" value="1" id="myRange" oninput="demo.innerHTML=['One','Two','Three','Four','Five'][Number(this.value)-1];">
<p><span id="demo">One</span></p>

一个

您应该能够通过为输入类型“range”使用datalist元素来实现这一点

---

将nStr常量设置为字符串，然后使用javascript将其拆分为数组有什么好处？为什么不从一开始就将其设置为数组？您的方法似乎添加了一个JS步骤来设置常量变量……将其设置为nStr=['0'、'1'、'2'、'3'、'4'、'5']不是更好吗@gavgrif这只是我的键盘很难用逗号和撇号，我也发现它更可读，理解起来也不太复杂

var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
output.innerHTML = slider.value;
    
slider.oninput = function() {
output.innerHTML = this.value;
}

<input type="range" min="1" max="5" value="1" id="myRange" oninput="demo.innerHTML=['One','Two','Three','Four','Five'][Number(this.value)-1];">
<p><span id="demo">One</span></p>

<input type="range" value="0" min="0" max="4" list="tickmarks" id="myRange">
<datalist id="tickmarks">
  <option value="0" label="One">One</option>
  <option value="1" label="Two">One</option>
  <option value="2" label="Three">Two</option>
  <option value="3" label="Four">Three</option>
  <option value="4" label="Five">Four</option>
</datalist>
<p><span id="demo"></span></p>

var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
var datalist = document.getElementById("tickmarks").options

output.innerHTML = slider.value;

slider.oninput = function() {
  output.innerHTML = datalist[this.value].label
}