<input type="range">

Baseline 广泛可用 *

此特性已得到良好确立，可跨多种设备和浏览器版本使用。自 2017 年 3 月起，所有浏览器均支持此特性。

* 此特性的某些部分可能存在不同级别的支持。

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

由于这种小部件不精确，因此只有当控件的精确值不重要时才应使用它。

试一试

<p>Audio settings:</p>

<div>
  <input type="range" id="volume" name="volume" min="0" max="11" />
  <label for="volume">Volume</label>
</div>

<div>
  <input
    type="range"
    id="cowbell"
    name="cowbell"
    min="0"
    max="100"
    value="90"
    step="10" />
  <label for="cowbell">Cowbell</label>
</div>

p,
label {
  font:
    1rem "Fira Sans",
    sans-serif;
}

input {
  margin: 0.4rem;
}

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

值

<input type="range"> 元素的值通过 value 属性设置，该属性接受一个表示所选数字的字符串。值永远不是空字符串 ("")。默认值是指定最小值和最大值之间的一半——除非最大值实际上小于最小值，在这种情况下，默认值设置为 min 属性的值。确定默认值的算法是

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

如果尝试将值设置为低于最小值，则将其设置为最小值。同样，尝试将值设置为高于最大值将导致其设置为最大值。

验证

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

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

注意： 以下输入属性不适用于输入范围：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 属性是一个数字，指定值必须遵循的粒度，或者特殊值 any（如下所述）。只有从步长基数计算的整数步长值才有效。如果指定了 min，则步长基数是 min，否则是 value，如果两者都未提供，则为 0。

step 输入的默认步长值为 1，只允许输入整数——_除非_步长基数不是整数。

字符串值 any 意味着不暗示任何步长，并且允许任何值（除了其他约束，例如 min 和 max）。请参阅将步长设置为 any 值示例，了解这在支持的浏览器中是如何工作的。

注意： 当用户输入的值不符合步长配置时，用户代理可能会将值四舍五入到最近的有效值，当有两个同样接近的选项时，优先向上取整。

非标准属性

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 属性，并将其 id 指定为 <datalist> 元素，该元素定义了控件上的一系列刻度线。每个点都使用一个 <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 用于多个范围控件

为了避免代码重复，你可以将相同的 <datalist> 重用于多个 <input type="range"> 元素以及其他 <input> 类型。

注意： 如果你还想显示标签，如下例所示，那么你需要为每个范围输入一个 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;
}

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

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

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

技术摘要

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