<input type="range">

类型为range的<input>元素允许用户指定一个数值，该数值必须不小于给定值，也不大于另一个给定值。然而，精确值并不重要。这通常使用滑块或旋钮控件来表示，而不是像number输入类型那样的文本输入框。

由于这种小部件不精确，只有在控制的精确值不重要的情况下才应使用它。

试试看

如果用户的浏览器不支持类型range，它将回退并将其视为text输入。

验证

没有模式验证可用；但是，会执行以下形式的自动验证

如果value设置为无法转换为有效浮点数的内容，则验证失败，因为输入存在错误输入。
该值不会小于min。默认值为 0。
该值不会大于max。默认值为 100。
该值将是step的倍数。默认值为 1。

值

value属性包含一个字符串，该字符串包含所选数字的字符串表示形式。该值永远不会是空字符串 ("")。默认值为指定最小值和最大值之间的一半 - 除非最大值实际上小于最小值，在这种情况下，默认值将设置为min属性的值。确定默认值的算法为

defaultValue =
  rangeElem.max < rangeElem.min
    ? rangeElem.min
    : rangeElem.min + (rangeElem.max - rangeElem.min) / 2;

如果尝试将值设置为低于最小值，则将其设置为最小值。类似地，尝试将值设置为高于最大值会导致将其设置为最大值。

注意：以下输入属性不适用于范围输入：accept、alt、checked、dirname、formaction、formenctype、formmethod、formnovalidate、formtarget、height、maxlength、minlength、multiple、pattern、placeholder、readonly、required、size和src。任何这些属性（如果包含）都将被忽略。

list

list属性的值是相同文档中<datalist>元素的id。该<datalist>提供了一个预定义值的列表，以建议用户为该输入使用。列表中任何与type不兼容的值都不会包含在建议的选项中。提供的这些值是建议，不是要求：用户可以选择此预定义列表，也可以提供其他值。

有关如何在支持的浏览器中表示范围上的选项的示例，请参阅下面的添加刻度标记。

max

允许值范围内的最大值。如果输入元素中的value超过此值，则该元素将无法通过约束验证。如果max属性的值不是数字，则该元素没有最大值。

此值必须大于或等于min属性的值。请参阅 HTML max属性。

min

允许值范围内的最小值。如果元素的value小于此值，则该元素将无法通过约束验证。如果为min指定的值不是有效的数字，则该输入没有最小值。

此值必须小于或等于max属性的值。请参阅 HTML min属性。

注意：如果min和max值相等，或者max值小于min值，则用户将无法与范围进行交互。

step

step属性是一个数字，指定值必须遵循的粒度。只有与指定的步长间隔匹配的值（如果指定了min，则使用value，或者如果两者都没有提供，则使用适当的默认值）才是有效的。

step属性还可以设置为any字符串值。此step值表示没有隐含的步长间隔，指定范围内的任何值都是允许的（排除其他约束，例如min和max）。有关此在支持的浏览器中的工作方式，请参阅将 step 设置为 any 值示例。

注意： 当用户输入的值不符合步长配置时，用户代理可能会将该值舍入到最接近的有效值，在有两个等距选项时，倾向于将数字向上舍入。

range 输入的默认步长值为 1，仅允许输入整数，除非步长基数不是整数；例如，如果您将 min 设置为 -10 并将 value 设置为 1.5，则 step 为 1 仅允许正方向上的 1.5、2.5、3.5 等值，以及负方向上的 -0.5、-1.5、-2.5 等值。请参见 HTML step 属性。

非标准属性

orient

类似于影响 <progress> 和 <meter> 元素的非标准 CSS 属性 -moz-orient，orient 属性定义了范围滑块的方向。值包括 horizontal，表示范围以水平方式呈现，以及 vertical，表示范围以垂直方式呈现。

示例

虽然 number 类型允许用户输入一个数字，并带有可选的约束条件，强制其值介于最小值和最大值之间，但它确实要求用户输入一个特定值。range 输入类型允许您在用户可能并不关心或不知道所选特定数值的情况下，向用户询问一个值。

一些使用范围输入的常见情况的示例

音频控制，例如音量和平衡，或滤波器控制。
颜色配置控制，例如颜色通道、透明度、亮度等。
游戏配置控制，例如难度、可见距离、世界大小等等。
密码管理器生成的密码的密码长度。

一般来说，如果用户更感兴趣的是最小值和最大值之间距离的百分比，而不是实际的数字本身，那么范围输入是一个很好的选择。例如，在家庭立体声音量控制的情况下，用户通常会想到 "将音量设置为最大值的一半"，而不是 "将音量设置为 0.5"。

指定最小值和最大值

默认情况下，最小值为 0，最大值为 100。如果您不想要这样做，可以通过更改 min 和/或 max 属性的值来轻松指定不同的边界。这些可以是任何浮点值。

例如，要询问用户在 -10 到 10 之间的值，可以使用

html

<input type="range" min="-10" max="10" />

设置值的粒度

默认情况下，粒度为 1，表示该值始终为整数。要控制粒度，可以更改 step 属性。例如，如果您需要一个介于 5 和 10 之间的值，您应该将 step 的值设置为 0.5

设置 step 属性

html

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

将 step 设置为 `any`

如果您想接受任何值，无论它扩展到多少位小数，都可以为 step 属性指定一个 any 值

HTML

html

<input id="pi_input" type="range" min="0" max="3.14" step="any" />
<p>Value: <output id="value"></output></p>

JavaScript

const value = document.querySelector("#value");
const input = document.querySelector("#pi_input");
value.textContent = input.value;
input.addEventListener("input", (event) => {
  value.textContent = event.target.value;
});

此示例允许用户在 0 到 π 之间选择任何值，而不会对所选值的尾数部分进行任何限制。JavaScript 用于显示用户与范围交互时值的变化方式。

添加刻度线

要向范围控件添加刻度线，请包含 list 属性，并将其设置为 <datalist> 元素的 id，该元素定义了一系列控件上的刻度线。每个点都使用一个 <option> 元素来表示，其 value 设置为应该绘制标记的范围值。

HTML

html

<label for="temp">Choose a comfortable temperature:</label><br />
<input type="range" id="temp" name="temp" list="markers" />

<datalist id="markers">
  <option value="0"></option>
  <option value="25"></option>
  <option value="50"></option>
  <option value="75"></option>
  <option value="100"></option>
</datalist>

结果

对多个范围控件使用相同的 datalist

为了帮助您避免重复代码，您可以对多个 <input type="range"> 元素和其他 <input> 类型重复使用相同的 <datalist>。

注意： 如果您还想显示标签（如下面的示例所示），则每个范围输入都需要一个 datalist。

HTML

html

<p>
  <label for="temp1">Temperature for room 1:</label>
  <input type="range" id="temp1" name="temp1" list="values" />
</p>
<p>
  <label for="temp2">Temperature for room 2:</label>
  <input type="range" id="temp2" name="temp2" list="values" />
</p>

<p>
  <label for="temp3">Temperature for room 3:</label>
  <input type="range" id="temp3" name="temp3" list="values" />
</p>

<datalist id="values">
  <option value="0" label="0"></option>
  <option value="25" label="25"></option>
  <option value="50" label="50"></option>
  <option value="75" label="75"></option>
  <option value="100" label="100"></option>
</datalist>

结果

添加标签

您可以通过为 <option> 元素赋予 label 属性来标记刻度线。但是，标签内容默认情况下不会显示。您可以使用 CSS 来显示标签并将其正确定位。以下是一种方法。

HTML

html

<label for="tempB">Choose a comfortable temperature:</label><br />
<input type="range" id="tempB" name="temp" list="values" />

<datalist id="values">
  <option value="0" label="very cold!"></option>
  <option value="25" label="cool"></option>
  <option value="50" label="medium"></option>
  <option value="75" label="getting warm!"></option>
  <option value="100" label="hot!"></option>
</datalist>

CSS

css

datalist {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  writing-mode: vertical-lr;
  width: 200px;
}

option {
  padding: 0;
}

input[type="range"] {
  width: 200px;
  margin: 0;
}

结果

创建垂直范围控件

默认情况下，浏览器会将范围输入呈现为滑块，滑块在左右移动。

要创建垂直范围，其中滑块上下移动，请将 writing-mode 属性设置为 vertical-rl 或 vertical-lr。

<input type="range" min="0" max="10" value="8" />

css

input[type="range"] {
  writing-mode: vertical-lr;
}

这将导致范围滑块以垂直方式呈现

您还可以将 CSS appearance 属性设置为非标准的 slider-vertical 值，如果您想支持较旧版本的 Chrome 和 Safari，并包含非标准的 orient="vertical" 属性来支持较旧版本的 Firefox。

请参见创建垂直表单控件以获取示例。

技术摘要

值	一个包含所选数值的字符串表示形式的字符串；使用 `valueAsNumber` 获取数值。
事件	`change` 和 `input`
支持的通用属性	`autocomplete`，`list`，`max`，`min`，`step`
IDL 属性	`list`，`value`，`valueAsNumber`
DOM 接口	`HTMLInputElement`
方法	`stepDown()` 和 `stepUp()`
隐式 ARIA 角色	`slider`