时间戳

首页 > 解决方案 > 滑块根据值显示单词

javascript - 滑块根据值显示单词

问题描述

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

是否可以将值“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;
}

任何帮助将不胜感激！

标签： javascripthtmlsliderjquery-ui-slider

解决方案

您需要有一种机制来将数值与单词表示相匹配——我会用一个数组来做这件事，并将数值传递给一个返回数值字符串值的函数。

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>

推荐阅读