HTML5:如何创建一个“;范围输入类型“;具有动态值

HTML5: How to create a "range input type" with dynamic values?

本文关键字：范围 输入 动态 类型 何创建 创建 HTML5 一个      更新时间：2023-11-01

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

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

此处的值仅为整数，如：

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

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

字符串1、字符串2、字符串3

谢谢。

到目前为止，不可能动态传递diffrent值，但如果有人想通过范围类型显示选项，那么他需要像上面提到的@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];
 }
}

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

但是，您可以通过将字符串放入数组中，并为滑块提供min值0、max值array.length-1和步长值1来模拟此情况。然后使用滑块的值作为数组的索引。（如果您在滑块上显示字符串作为标题，或者至少在滑块上有一个onchange处理程序，该处理程序显示与滑块当前位置相对应的字符串，这也会对用户有所帮助。）

相关文章：