HTML5：如何创建具有动态值的“范围输入类型”？

Question

我正在尝试使用范围类型输入创建表单。 喜欢

<input id="slider1" type="range" min="0" max="100" step="10" />

这里的值是整数，仅像：

0,1,2,3,4,5 ........ 99,100。

是否可以从数据库中创建范围值，例如字符串或其他类型，例如：

字符串1，字符串2，字符串3

谢谢。

Answer 1

到目前为止，不可能动态传递差异值，但是如果有人想通过范围类型显示选项，那么他需要像上面提到的@phari那样进行操作。

假设我们有一个范围类型输入，并且我们想以此选择一些值。 输入类型的代码为：

<input type="range" min='0' max ='3' step='1'  >

在这里，任何人都可以选择“ 0到3”之间的值。

现在，我们添加一些javascript以获取值并使用它们。

<input type="range" min='0' max ='3' step='1' oninput="outputUpdate(value)">

现在获取一个数组，并传递从范围中选择的值。

function outputUpdate(rangeValues){
var values = ['Good','Bad','Average'];
for(var i=0; i<rangeValues; i++){
document.querySelector("#result").value=values[i];
 }
}

Answer 2

严格来说，这是不可能的（请参阅规范 ）。

但是，您可以通过以下方式进行模拟：将字符串放入数组中，并将滑块的min设为0，将max array.length-1 ，并将步长设为1。然后将滑块的值用作索引到数组。 （如果您将字符串作为标题显示在滑块上，或者至少在滑块上具有onchange处理程序，该句柄在滑块附近某处显示了与滑块当前位置相对应的字符串，这也将对您的用户有所帮助。）