HTML | DOM 输入范围表单属性

概述

<input> 元素的 type 属性可以设置为 range，用于创建一个数值输入范围的表单控件。除了标准的 <input> 属性外，还有一些其他的属性可以用于进一步控制该控件的行为或外观。

HTML 属性

min 和 max

min 和 max 属性分别用于指定可选择的最小和最大值（默认值是 0 和 100）。当用户在表单部件上拖动滑块时，这些值将为当前值设置边界。

<input type="range" min="0" max="100">

step

step 属性用于设置滑块在拖动时向前或向后移动的步长。默认值为 1 。

<input type="range" min="0" max="10" step="0.5">

value

value 属性用于设置滑块的初始值。与其他表单控件一样，可以在HTML中指定值，或在JavaScript中使用DOM进行设置。

<input type="range" min="0" max="100" value="50">

disabled

disabled 属性用于禁用表单控件。

<input type="range" min="0" max="100" disabled>

readonly

如果将 readonly 属性设置为 true ，则表单控件将变为只读模式，用户无法更改其值。

<input type="range" min="0" max="100" value="50" readonly>

list

可以通过设置 list 属性来将输入范围关联到 <datalist> 元素。

<datalist id="numbers">
  <option value="10">
  <option value="25">
  <option value="50">
  <option value="75">
  <option value="100">
</datalist>

<input type="range" list="numbers">

DOM 属性

valueAsNumber

valueAsNumber 属性是要设置或检索的值的当前值（数字类型）。如果输入不是一个有效的数字，则返回 NaN。

var myRange = document.getElementById("myRange");
var x = myRange.valueAsNumber;

stepUp() 和 stepDown()

stepUp() 和 stepDown() 方法允许您在 JavaScript 中以编程方式移动范围输入控件的值。

var myRange = document.getElementById("myRange");
myRange.stepUp();

结论

在 HTML 中，<input type="range"> 可以创建用于选择数值范围的表单输入控件。可以设置各种属性，例如 min、max 和 value 用于控制控件的行为，并且可以使用 JavaScript 中的 DOM 属性和方法来进一步控制该控件。