HTML input type range 类型

本文目录结构

功能介绍

<input> range 类型的元素允许用户指定一个数值，该数值必须不小于给定值，并且不得大于另一个给定值。但是，精确值并不重要。

通常使用滑块或拨号控件而不是像 number 输入类型这样的文本输入框来表示。 由于这种小部件不精确，因此除非控件的确切值不重要，否则通常不应使用它。

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

验证方式

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

• 如果将 value 设置为无法转换为有效浮点数的值，则验证将失败，因为输入正遭受错误的输入。
• 该值不得小于 min. 默认值为0。
• 该值将不大于 max. 默认值为100。
• 该值将是 step. 预设值为1。

价值

value 属性包含一个 DOMString 该属性包含所选数字的字符串表示形式。 该值绝不能为空字符串 ("").

默认值介于指定的最小值和最大值之间，除非最大值实际上小于最小值，在这种情况下，默认值设置 min 属性的值。确定默认值的算法是：

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

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

其他属性

除了所有 <input> 元素共享的属性之外，范围输入还提供以下属性：

属性	描述
list	<datalist>元素的ID，其中包含可选的预定义选项
max	最大允许值
min	最小允许值
step	步进间隔，用于用户界面和验证目的

list

The values of the list attribute is the id of a <datalist> element located in the same document. The <datalist> provides a list of predefined values to suggest to the user for this input. Any values in the list that are not compatible with the type are not included in the suggested options. The values provided are suggestions, not requirements: users can select from this predefined list or provide a different value.

有关在支持的浏览器中如何表示范围中的选项的示例，

max

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

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

min

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

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

step

The step attribute is a number that specifies the granularity that the value must adhere to, or the special value any, which is described below. Only values which are equal to the basis for stepping (min if specified, value otherwise, and an appropriate default value if neither of those is provided) are valid.

A string value of any means that no stepping is implied, and any value is allowed (barring other constraints, such as min and max).

Note: When the data entered by the user doesn’t adhere to the stepping configuration, the user agent may round to the nearest valid value, preferring numbers in the positive direction when there are two equally close options.

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

非标准属性

属性	描述
orient	设置范围滑块的方向。 仅限Firefox .

orient

类似于-moz-orient非标准CSS属性会影响 <progress> 和 <meter> 元素， orient 属性定义范围滑块的方向。

值包括 horizontal, 表示范围是水平呈现， 和 vertical, 其中范围是垂直呈现）。

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

例子

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

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

• 音频控件（例如音量和平衡）或过滤器控件。
• 颜色配置控件，例如颜色通道，透明度，亮度等。
• 游戏配置控件，例如难度，可见性距离，世界范围等等。
• 密码管理员生成的密码的密码长度。

通常，如果用户对最小值和最大值之间的距离的百分比比实际数字本身更感兴趣，则范围输入是一个不错的选择。 例如，在家庭立体声音量控制的情况下，用户通常认为“将音量设置为最大音量的一半”而不是“将音量设置为0.5”。

指定最小和最大

默认情况下，最小值为0，最大值为100。如果这不是您想要的值，则可以通过更改 min 和/或 max 属性。 这些可以是任何浮点值。

例如，要要求用户输入介于-10和10之间的值，可以使用：

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

设置值的粒度

默认情况下，粒度为1，表示该值始终是整数。 您可以更改 step 属性以控制粒度。 例如，如果您需要一个介于5到10之间的值（精确到两位小数），则应将 step 的值设置为0.01:

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

如果要接受任何值而不论扩展到小数点后多少位，都可以为step 属性指定 any 数值。

<input type="range" min="0" max="3.14" step="any">

该示例使用户可以选择0到π之间的任何值，而对所选值的小数部分没有任何限制。

添加井号和标签

HTML规范使浏览器在如何显示范围控件方面具有一定的灵活性。 在散列标记和较小程度上的标签方面，这种灵活性最明显。 该规范描述了如何使用 list 属性和 <datalist> 元素将自定义点添加到范围控件，但没有任何要求或 甚至是沿控件长度的标准化哈希或刻度线的建议。

范围控制模型

由于浏览器具有这种灵活性，并且迄今为止都不支持HTML为范围控件定义的所有功能，因此以下是一些模型，以向您展示在支持它们的浏览器中在macOS上可以得到的功能。

无装饰的范围控制

如果不指定 list 属性，或者浏览器不支持该属性，则会得到此结果。

<input type="range">

带散列标记的范围控件

此范围控件使用的 list 属性指定<datalist> 的ID，该ID定义了控件上的一系列带散列的标记。

其中有11个，因此在0％和每个10％标记处都有一个。 每个点均使用 <option> 元素表示，其元素 value 设置为应绘制标记的范围值。

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

<datalist id="tickmarks">
  <option value="0"></option>
  <option value="10"></option>
  <option value="20"></option>
  <option value="30"></option>
  <option value="40"></option>
  <option value="50"></option>
  <option value="60"></option>
  <option value="70"></option>
  <option value="80"></option>
  <option value="90"></option>
  <option value="100"></option>
</datalist>

具有散列标记和标签的范围控件

您可以通过向 label 元素添加 <option> 属性来将标签添加到您的范围控件中，这些元素对应于您希望为其添加标签的标记。

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

<datalist id="tickmarks">
  <option value="0" label="0%"></option>
  <option value="10"></option>
  <option value="20"></option>
  <option value="30"></option>
  <option value="40"></option>
  <option value="50" label="50%"></option>
  <option value="60"></option>
  <option value="70"></option>
  <option value="80"></option>
  <option value="90"></option>
  <option value="100" label="100%"></option>
</datalist>

注意: 目前没有浏览器完全支持这些特性。例如，Firefox根本不支持散列标记和标签，而Chrome支持散列标记，但不支持标签。Chrome的66版本(66.0.3359.181)支持标签，但是 <datalist> 标签必须使用CSS样式，因为它的 display属性默认设置为 none ，隐藏了标签。

改变方向

使旋钮向左和向右滑动。 如果支持，我们将能够声明垂直高度，并通过声明高度值大于宽度值来使用CSS上下滑动。 任何主要的浏览器实际上尚未实现此功能。（请参阅bug 981916, Chrome bug 341071)。也许它仍在讨论中。

同时，我们可以通过使用CSS变换旋转范围来使范围垂直，或者通过使用各自的方法定位每个浏览器引擎，包括通过将 appearance 设置为 slider-vertical, 在Firefox中使用非标准的orient 属性，或通过更改Internet Explorer和Edge的文本方向。

考虑以下范围控制：

<input type="range" id="volume" min="0" max="11" value="7" step="1">

此控件是水平的（至少对大多数主要浏览器（至少，如果不是全部）；其他控件可能有所不同）。

标准

根据规范，使其垂直需要添加CSS来更改控件的尺寸，以使其比宽度高，如下所示：

CSS

#volume {
  height: 150px;
  width: 50px;
}

HTML

<input type="range" id="volume" min="0" max="11" value="7" step="1">

不幸的是，当前没有主流浏览器直接支持垂直范围控件。

变换：旋转（-90deg）

但是，您可以通过在侧面绘制水平范围控件来创建垂直范围控件。 最简单的方法是使用CSS：通过应用 transform 旋转元素，可以使其垂直。 让我们来看看。

HTML

需要更新HTML，以将 <input> 包裹在 <div> 中，以便我们在执行转换后纠正布局（因为转换不会自动影响 页面的布局）：

<div class="slider-wrapper">
  <input type="range" min="0" max="11" value="7" step="1">
</div>

CSS

现在我们需要一些CSS。 首先是包装器本身的CSS； 这指定了我们想要的显示模式和大小，以便页面正确布局； 本质上，它是为滑块保留页面的区域，以便旋转的滑块适合保留的空间而不会造成混乱。

.slider-wrapper {
  display: inline-block;
  width: 20px;
  height: 150px;
  padding: 0;
}

然后是保留空间中 <input> 元素的样式信息：

.slider-wrapper input {
  width: 150px;
  height: 20px;
  margin: 0;
  transform-origin: 75px 75px;
  transform: rotate(-90deg);
}

控件的大小设置为150像素长x 20像素高。 边距设置为0， transform-origin 移至滑块旋转通过的空间的中间； 由于滑块配置为150像素宽，因此它将旋转通过每边150像素的框。

在每个轴上将原点偏移75像素，这意味着我们将围绕该空间的中心旋转。 最后，我们将逆时针旋转90°。 结果：旋转一个范围输入，因此最大值在顶部，最小值在底部。

外观特性

appearance属性具有非标准值的slider-vertical可以使滑块垂直。

HTML

我们使用与前面的示例相同的HTML：

<input type="range" min="0" max="11" value="7" step="1">

CSS

我们仅针对具有范围类型的输入：

input[type="range"] {
  -webkit-appearance: slider-vertical;
}

定向属性

仅在Firefox中，有一个非标准的 orient 属性。

HTML

使用与前面示例类似的HTML，我们添加属性值为 vertical:

<input type="range" min="0" max="11" value="7" step="1" orient="vertical">

写作模式：bt-lr;

The writing-mode 属性通常不应用于出于国际化或本地化目的更改文本方向，而可以用于特殊效果。

HTML

我们使用与前面的示例相同的HTML：

<input type="range" min="0" max="11" value="7" step="1">

CSS

我们仅以范围为类型的输入作为目标，将写入模式从默认更改为 bt-lr, 或从下至上和从左至右：

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

放在一起

由于上述每个示例都在不同的浏览器中工作，因此您可以将所有示例放在一个示例中，以使其在跨浏览器中工作：

HTML

对于Firefox，我们将orient属性的值保持为vertical：

<input type="range" min="0" max="11" value="7" step="1" orient="vertical">

CSS

对于Edge和Internet Explorer，我们仅将输入类型作为目标，将写入模式从默认更改为 bt-lr, 或者从下至上，从左至右，然后添加 -webkit-appearance: slider-vertical用于所有基于-webkit的浏览器：

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