Question

我正在尝试创建一个带有范围类型输入的表单。像

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

这里的值只是整数，如：

0,1,2,3,4,5 ........ 99100。

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

String1，String2，String3

感谢。

Answer 1

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

假设我们有一个范围类型输入，我们想要选择一些值。输入类型的代码是：

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

此处任何人都可以选择＆＃39; 0到3＆＃39;。

之间的值

现在我们添加一些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

严格地说，这是不可能的（参见specification）。

但是，您可以通过将字符串放入数组，并为滑块指定min值为0，max值为array.length-1，并且步长值为1.然后使用滑块的值作为数组的索引。（如果您在滑块上显示字符串作为标题，或者至少在滑块上有一个onchange处理程序，它也会帮助您的用户，该处理程序显示与滑块在滑块附近某处的当前位置对应的字符串。）

HTML5：如何创建＆＃34;范围输入类型＆＃34;有动态价值？

2 个答案: