input type="range"

<input> 类型 "range" 的元素允许用户指定一个必须不小于给定值的数值, 并且不超过另一个给定值。然而, 确切的价值并不被认为是重要的。通常使用滑块或拨号控件而不是文本输入框 (即 "数字" 输入类型通常在屏幕上表示) 来表示。因为这种小部件不精确, 所以通常不应该使用它, 除非控件的精确值不重要。

<input type="range">

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

值	包含所选数值的字符串表示的DOMString; 使用valueAsNumber来获取值作为一个数字
活动	改变和输入
支持的通用属性	自动完成，列表，最大值，最小值和步长
IDL属性	列表，值和值asNumber
方法	stepDown（）和stepUp（）

Value

该value属性包含一个DOMString包含选定数字的字符串表示的属性。该值从不是空字符串（""）。默认值是最小值和最大值之间的一半，除非指定的最大值实际上小于指定的最小值，在这种情况下，默认值被设置为min属性的值。确定默认值的算法是：

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

如果尝试设置低于最小值的值，则将该值设置为最小值。同样，试图设置高于最大值的值会导致值被设置为最大值。

使用范围输入

虽然该"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">

如果您希望接受任何值，而不考虑其扩展的小数位数，则可"any"以为step属性指定一个值：

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

这个例子让用户选择0到π之间的任何值，对所选值的小数部分没有任何限制。

添加散列标记和标签

HTML规范为浏览器提供了一些如何呈现范围控制的灵活性。这种灵活性没有任何地方比在散列标记方面更为明显，在较小的程度上也是标签。该规范描述了如何使用list属性和a 添加自定义点到范围控件<datalist>，但没有任何要求甚至对控件的长度上的标准散列或刻度标记的建议。

范围控制模型

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

一个朴素的范围控制

如果你没有指定list，或者浏览器不支持，就是这样。

HTML	Screenshot
<input type="range">

带有散列标记的范围控制

这个范围控制使用一个list属性，它指定了一个<datalist>在控件上定义了一系列散列标记的ID ：它们中的11个，这样就有0％和10％的标记。我们希望有一个哈希标记的每个点都使用一个<option>元素来表示，该元素被value设置为应该绘制标记的范围值。

HTML	Screenshot
<input type="range" list="tickmarks"> <datalist id="tickmarks"> <option value="0"> <option value="10"> <option value="20"> <option value="30"> <option value="40"> <option value="50"> <option value="60"> <option value="70"> <option value="80"> <option value="90"> <option value="100"> </datalist>

带有散列标记和标签的范围控制

您可以将标签添加到您的范围控制中，方法是将该label属性添加<option>到与您希望具有标签的刻度线相对应的元素。

HTML	Screenshot
<input type="range" list="tickmarks"> <datalist id="tickmarks"> <option value="0" label="0%"> <option value="10"> <option value="20"> <option value="30"> <option value="40"> <option value="50" label="50%"> <option value="60"> <option value="70"> <option value="80"> <option value="90"> <option value="100" label="100%"> </datalist>

目前，没有浏览器完全支持这些功能。Firefox根本不支持散列标记和标签，例如Chrome支持散列标记但不支持标签。

改变方向

HTML规范建议，如果指定的宽度小于高度，浏览器会自动切换到绘图范围控件。不幸的是，目前没有主流浏览器直接支持垂直范围控件。但是，您可以通过在其一侧绘制水平范围控制来创建垂直范围控制。最简单的方法是使用CSS：通过应用transform旋转元素，可以使其垂直。让我们来看看。

HTML

HTML需要被更新来包装<input>在a中<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像素长×20像素高。页边距被设置为0，并且transform-origin移动到滑块旋转通过的空间的中间; 由于滑块被配置为150像素宽，所以它通过每侧150像素的盒子旋转。在每个轴上将原点偏移75px意味着我们将围绕该空间的中心旋转。最后，我们逆时针旋转90°。结果是：范围输入被旋转，因此最大值在顶部，最小值在底部。

结果

截图	现场采样

验证

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

如果将value值设置为无法转换为有效浮点数字的内容, 则验证失败, 因为输入正遭受错误的输入。

该值不会小于min。默认值是0。

该值不会大于max。默认值是100。

该值将是一个倍数step。默认值是1。

例子

另外，上面的各种示例中，您将在这些文章中找到范围输入：

使用ConstantSourceNode控制多个参数 SpecificationsSpecificationStatusCommentWHATWG HTML生活标准该规范中<input type =“range”>'的定义。生活标准初始定义HTML 5.1该规范中<input type =“range”>'的定义。推荐初始definitionBrowser compatibilityFeatureChromeEdgeFirefox Gecko）Internet ExplorerOperaSafariBasic support4.021223（23）11010.13.1 AndroidEndroidChrome for AndroidEdgeFirefox Mobile（Gecko）IE MobileOpera MobileSafari MobileBasic support2.13572（Yes）52.0（52）110（Yes）5.11虽然规范说明范围输入应该垂直绘制如果宽度大于高度，则此行为目前尚未实施。有关更多信息，请参阅这些Firefox错误：bug 981916.2 Chrome实现了slider-vertical非标准-webkit-appearance属性的值。您不应该使用它，因为它是专有的，除非您为其他浏览器的用户包含适当的回退 .3 Android浏览器"range"从版本2.1开始识别类型，但直到版本4.3.4才完全实现它。绘制散列/刻度标记尚未实施。有关更多信息，请参阅bug 841942

HTML表单

<input>和HTMLInputElement它基于的界面

<input type="number">

本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com

最后更新于：2017-12-18