滑块显示基于值的单词

问题描述

我有一个滑块，在其下方显示有效值。如何根据有效值将其从显示数字更改为显示单词？

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

这是小提琴：https://jsfiddle.net/orv5sety/

下面是我所拥有的：

HTML：

<input type="range" min="1" max="5" value="1" id="myRange">
<p><span id="demo"></span></p>

JS：

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

任何帮助将不胜感激！

解决方法

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

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

function numberToString(num) {
  const numberStrings = ['One','Two','Three','Four','Five'];
  return numberStrings[num-1]
}

<input type="range" min="1" max="5" value="1" id="myRange">
<p><span id="demo"></span></p>

,

简单地

const nStr = 'zero one two three four five'.split(' ')

demo.textContent = nStr[ myRange.valueAsNumber ]

myRange.oninput=_=>
  {
  demo.textContent = nStr[ myRange.valueAsNumber ]
  }

<input type="range" min="1" max="5" value="1" id="myRange" step="1">
<p id="demo"> </p>

,

另一个...

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

,

您应该能够通过将datalist元素用作输入类型“ range”来实现这一目标。

<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
}