<input type="range"> - HTML: HyperText Markup Language

在此页

Additional attributes
范例
规范
浏览器兼容性
另请参阅
相关话题

<input> elements of type range let the user specify a numeric value which must be no less than a given value, and no more than another given value. The precise value, however, is not considered important. This is typically represented using a slider or dial control rather than a text entry box like the number input type. Because this kind of widget is imprecise, it shouldn't typically be used unless the control's exact value isn't important.

The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

If the user's browser doesn't support type range , it will fall back and treat it as a text 输入。

值	A `DOMString` containing the string representation of the selected numeric value; use `valueAsNumber` to get the value as a `Number` .
事件	`change` and `input`
Supported common attributes	`autocomplete` , `list` , `max` , `min` ，和 `step`
IDL attributes	`list` , `value` ，和 `valueAsNumber`
方法	`stepDown()` and `stepUp()`

验证

There is no pattern validation available; however, the following forms of automatic validation are performed:

若 value is set to something which can't be converted into a valid floating-point number, validation fails because the input is suffering from a bad input.
The value won't be less than min . The default is 0.
The value won't be greater than max . The default is 100.
The value will be a multiple of step . The default is 1.

值

value attribute contains a DOMString which contains a string representation of the selected number. The value is never an empty string ( "" ). The default value is halfway between the specified minimum and maximum—unless the maximum is actually less than the minimum, in which case the default is set to the value of the min attribute. The algorithm for determining the default value is:

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

If an attempt is made to set the value lower than the minimum, it is set to the minimum. Similarly, an attempt to set the value higher than the maximum results in it being set to the maximum.

Additional attributes

In addition to the attributes shared by all <input> elements, range inputs offer the following attributes:

属性	描述
`list`	The id of the <datalist> element that contains optional pre-defined options
`max`	The maximum permitted value
`min`	The minimum permitted value
`step`	The stepping interval, used both for user interface and validation purposes

`list`

The values of the list attribute is the id 的 <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.

见 range control with hash marks below for an example of how the options on a range are denoted in supported browsers

`max`

The greatest value in the range of permitted values. If the value entered into the element exceeds this, the element fails constraint validation . If the value of the max attribute isn't a number, then the element has no maximum value.

This value must be greater than or equal to the value of the min attribute. See the HTML max 属性。

`min`

The lowest value in the range of permitted values. If the value of the element is less than this, the element fails constraint validation . If a value is specified for min that isn't a valid number, the input has no minimum value.

This value must be less than or equal to the value of the max attribute. See the HTML min 属性。

`step`

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 ).

注意： When the data entered by the user doesn't adhere to the stepping configuration, the 用户代理 may round to the nearest valid value, preferring numbers in the positive direction when there are two equally close options.

The default stepping value for range inputs is 1, allowing only integers to be entered, unless the stepping base is not an integer; for example, if you set min to -10 and value to 1.5, then a step of 1 will allow only values such as 1.5, 2.5, 3.5,... in the positive direction and -0.5, -1.5, -2.5,... in the negative direction. See the HTML step 属性 .

Non Standard Attributes

属性	描述
`orient`	Sets the orientation of the range slider. Firefox only.

orient: Similar to the -moz-orient non-standard CSS property impacting the <progress> and <meter> elements, the orient attribute defines the orientation of the range slider. Values include horizontal , meaning the range is rendered horizontally, and vertical , where the range is rendered vertically.

Note: The following input attributes do not apply to the input range: accept , alt , checked , dirname , formaction , formenctype , formmethod , formnovalidate , formtarget , height , maxlength , minlength , multiple , pattern , placeholder , readonly , required , size , src ，和 width . Any of these attributes, if included, will be ignored.

范例

While the 编号 type lets users enter a number with optional constraints forcing their value to be between a minimum and a maximum value, it does require that they enter a specific value. The range input type lets you ask the user for a value in cases where the user may not even care—or know—what the specific numeric value selected is.

A few examples of situations in which range inputs are commonly used:

Audio controls such as volume and balance, or filter controls.
Color configuration controls such as color channels, transparency, brightness, etc.
Game configuration controls such as difficulty, visibility distance, world size, and so forth.
Password length for a password manager's generated passwords.

As a rule, if the user is more likely to be interested in the percentage of the distance between minimum and maximum values than the actual number itself, a range input is a great candidate. For example, in the case of a home stereo volume control, users typically think "set volume at halfway to maximum" instead of "set volume to 0.5".

Specifying the minimum and maximum

By default, the minimum is 0 and the maximum is 100. If that's not what you want, you can easily specify different bounds by changing the values of the min and/or max attributes. These can be any floating-point value.

For example, to ask the user for a value between -10 and 10, you can use:

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

Setting the value's granularity

By default, the granularity, is 1, meaning that the value is always an integer. You can change the step attribute to control the granularity. For example, If you need a value between 5 and 10, accurate to two decimal places, you should set the value of step to 0.01:

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

If you want to accept any value regardless of how many decimal places it extends to, you can specify a value of any 为 step 属性：

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

This example lets the user select any value between 0 and π without any restriction on the fractional part of the value selected.

Adding hash marks and labels

The HTML specification gives browsers some flexibility on how to present the range control. Nowhere is this flexibility more apparent than in the area of hash marks and, to a lesser degree, labels. The specification describes how to add custom points to the range control using the list attribute and a <datalist> element, but does not have any requirements or even recommendations for standardized hash or tick marks along the length of the control.

Range control mockups

Since browsers have this flexibility, and to date none support all of the features HTML defines for range controls, here are some mockups to show you what you might get on macOS in a browser which supports them.

An unadorned range control

This is what you get if you don't specify a list attribute, or if the browser doesn't support it.

HTML	范例
<input type="range">	Screenshot

	Live

A range control with hash marks

This range control is using a list attribute specifying the ID of a <datalist> which defines a series of hash marks on the control. There are eleven of them, so that there's one at 0% as well as at each 10% mark. Each point is represented using an <option> element with its value set to the range's value at which a mark should be drawn.

HTML	范例
<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>	Screenshot

	Live

A range control with hash marks and labels

You can add labels to your range control by adding the label 属性到 <option> elements corresponding to the tick marks you wish to have labels for.

HTML	范例
<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>	Screenshot

	Live

注意 : Currently, no browser fully supports these features. Firefox doesn't support hash marks and labels at all, for example, while Chrome supports hash marks but doesn't support labels. Version 66 (66.0.3359.181) of Chrome supports labels but the <datalist> tag has to be styled with CSS as its display property is set to none by default, hiding the labels.

Change the orientation

By default, if a browser renders a range input as a slider, it will render it so that the knob slides left and right. When supported, we will be able to make the range vertical, to slide up and down with CSS by declaring a height value greater than the width value. This is not actually implemented yet by any of the major browsers. (See Firefox bug 981916 , Chrome bug 341071 ). It also, perhaps, may still be under discussion .

In the meantime, we can make the range vertical by rotating it using using CSS transforms, or, by targeting each browser engine with their own method, which includes setting the appearance to slider-vertical , by using a non-standard orient attribute in Firefox, or by changing the text direction for Internet Explorer and Edge.

Consider this range control:

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

Screenshot	Live sample

This control is horizontal (at least on most if not all major browers; others might vary).

Standards

According to the specification, making it vertical requires adding CSS to change the dimensions of the control so that it's taller than it is wide, like this:

CSS

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

HTML

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

结果

Screenshot	Live sample

Unfortunately, no major browsers currently support vertical range controls directly.

transform: rotate(-90deg)

You can, however, create a vertical range control by drawing a horizontal range control on its side. The easiest way is to use CSS: by applying a transform to rotate the element, you can make it vertical. Let's take a look.

HTML

The HTML needs to be updated to wrap the <input> 在 <div> to let us correct the layout after the transform is performed (since transforms don't automatically affect the layout of the page):

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

CSS

Now we need some CSS. First is the CSS for the wrapper itself; this specifies the display mode and size we want so that the page lays out correctly; in essence, it's reserving an area of the page for the slider so that the rotated slider fits into the reserved space without making a mess of things.

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

Then comes the style information for the <input> element within the reserved space:

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

The size of the control is set to be 150 pixels long by 20 pixels tall. The margins are set to 0 and the transform-origin is shifted to the middle of the space the slider rotates through; since the slider is configured to be 150 pixels wide, it rotates through a box which is 150 pixels on each side. Offsetting the origin by 75px on each axis means we will rotate around the center of that space. Finally, we rotate counter-clockwise by 90°. The result: a range input which is rotated so the maximum value is at the top and the minimum value is at the bottom.

Screenshot	Live sample

appearance property

appearance property has a non-standard value of slider-vertical that, well, makes sliders vertical.

HTML

We use the same HTML as in the previous examples:

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

CSS

We target just the inputs with a type of range:

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

orient attribute

In Firefox only, there is a non-standard orient 特性。

HTML

Use similar HTML as in the previous examples, we add the attribute with a value of vertical :

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

writing-mode: bt-lr;

writing-mode property should generally not be used to alter text direction for internationalization or localization purposes, but can be used for special effects.

HTML

We use the same HTML as in the previous examples:

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

CSS

We target just the inputs with a type of range, changing the writing mode from the default to bt-lr , or bottom-to-top and left-to-right:

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

全部放在一起

As each of the above examples works in different browsers, you can put all of them in a single example to make it work cross browser:

HTML

We keep the orient attribute with a value of vertical for Firefox:

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

CSS

We target just the inputs with a type of range, changing the writing mode from the default to bt-lr , or bottom-to-top and left-to-right, for Edge and Internet Explorer, and add -webkit-appearance: slider-vertical for all -webkit-based browsers:

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

规范

规范	状态	注释
HTML 实时标准 The definition of '<input type="range">' in that specification.	实时标准	初始定义
HTML 5.1 The definition of '<input type="range">' in that specification.	推荐	初始定义

浏览器兼容性

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据

	桌面						移动
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`type="range"`	Chrome 完整支持 4	Edge 完整支持 12	Firefox 完整支持 23	IE 完整支持 10	Opera 完整支持 11	Safari 完整支持 3.1	WebView Android 完整支持 4.4 完整支持 4.4 不支持 2 — 4.4 注意事项注意事项 Pre-Chromium Android WebView recognizes the `range` type, but doesn't implement a range-specific control.	Chrome Android 完整支持 57	Firefox Android 完整支持 52	Opera Android 完整支持 Yes	Safari iOS 完整支持 5.1	Samsung Internet Android 完整支持 7.0
Tick mark support	Chrome 完整支持 Yes	Edge 完整支持 ≤79	Firefox 不支持 No 注意事项不支持 No 注意事项注意事项见 bug 841942 .	IE ?	Opera 完整支持 Yes	Safari 不支持 No	WebView Android 完整支持 Yes	Chrome Android 完整支持 Yes	Firefox Android 不支持 No 注意事项不支持 No 注意事项注意事项见 bug 841942 .	Opera Android 完整支持 Yes	Safari iOS 不支持 No	Samsung Internet Android 完整支持 Yes
Vertically-oriented slider support	Chrome 完整支持 Yes 注意事项完整支持 Yes 注意事项注意事项 The slider can be oriented vertically by setting the non-standard `-webkit-appearance: slider-vertical` style on the `input` element. You shouldn't use this, since it's proprietary, unless you include appropriate fallbacks for users of other browsers.	Edge 完整支持 12 注意事项完整支持 12 注意事项注意事项 The slider can be oriented vertically by setting the `writing-mode: bt-lr` style on the `input` 元素。	Firefox 不支持 No 注意事项不支持 No 注意事项注意事项见 bug 840820 and bug 981916 .	IE 完整支持 10 注意事项完整支持 10 注意事项注意事项 The slider can be oriented vertically by setting the `writing-mode: bt-lr` style on the `input` 元素。	Opera 完整支持 Yes 注意事项完整支持 Yes 注意事项注意事项 The slider can be oriented vertically by setting the non-standard `-webkit-appearance: slider-vertical` style on the `input` element. You shouldn't use this, since it's proprietary, unless you include appropriate fallbacks for users of other browsers.	Safari 完整支持 Yes 注意事项完整支持 Yes 注意事项注意事项 The slider can be oriented vertically by setting the non-standard `-webkit-appearance: slider-vertical` style on the `input` element. You shouldn't use this, since it's proprietary, unless you include appropriate fallbacks for users of other browsers.	WebView Android 完整支持 Yes 注意事项完整支持 Yes 注意事项注意事项 The slider can be oriented vertically by setting the non-standard `-webkit-appearance: slider-vertical` style on the `input` element. You shouldn't use this, since it's proprietary, unless you include appropriate fallbacks for users of other browsers.	Chrome Android 完整支持 Yes 注意事项完整支持 Yes 注意事项注意事项 The slider can be oriented vertically by setting the non-standard `-webkit-appearance: slider-vertical` style on the `input` element. You shouldn't use this, since it's proprietary, unless you include appropriate fallbacks for users of other browsers.	Firefox Android 不支持 No 注意事项不支持 No 注意事项注意事项见 bug 840820 and bug 981916 .	Opera Android 完整支持 Yes 注意事项完整支持 Yes 注意事项注意事项 The slider can be oriented vertically by setting the non-standard `-webkit-appearance: slider-vertical` style on the `input` element. You shouldn't use this, since it's proprietary, unless you include appropriate fallbacks for users of other browsers.	Safari iOS 完整支持 Yes 注意事项完整支持 Yes 注意事项注意事项 The slider can be oriented vertically by setting the non-standard `-webkit-appearance: slider-vertical` style on the `input` element. You shouldn't use this, since it's proprietary, unless you include appropriate fallbacks for users of other browsers.	Samsung Internet Android 完整支持 Yes 注意事项完整支持 Yes 注意事项注意事项 The slider can be oriented vertically by setting the non-standard `-webkit-appearance: slider-vertical` style on the `input` element. You shouldn't use this, since it's proprietary, unless you include appropriate fallbacks for users of other browsers.

图例

完整支持
不支持
兼容性未知 ?
见实现注意事项。

另请参阅

HTML Forms
<input> 和 HTMLInputElement interface it's based upon
<input type="number">
validityState.rangeOverflow and validityState.rangeUnderflow
Controlling multiple parameters with ConstantSourceNode
Styling the range element
Compatibility of CSS properties

元数据

最后修改： Oct 11, 2020

<input>
<input> 类型
HTML 元素
1. A
  1. <a>
  2. <abbr>
  3. ~~<acronym>~~
  4. <address>
  5. ~~<applet>~~
  6. <area>
  7. <article>
  8. <aside>
  9. <audio>
2. B
  1. <b>
  2. <base>
  3. ~~<basefont>~~
  4. <bdi>
  5. <bdo>
  6. ~~<bgsound>~~
  7. ~~<big>~~
  8. ~~<blink>~~
  9. <blockquote>
  10. <body>
  11. <br>
  12. <button>
3. C
  1. <canvas>
  2. <caption>
  3. ~~<center>~~
  4. <cite>
  5. <code>
  6. <col>
  7. <colgroup>
  8. <content>
4. D
  1. <data>
  2. <datalist>
  3. <dd>
  4. <del>
  5. <details>
  6. <dfn>
  7. <dialog>
  8. ~~<dir>~~
  9. <div>
  10. <dl>
  11. <dt>
5. E
  1. <em>
  2. <embed>
6. F
  1. <fieldset>
  2. <figcaption>
  3. <figure>
  4. ~~<font>~~
  5. <footer>
  6. <form>
  7. ~~<frame>~~
  8. ~~<frameset>~~
7. G H
  1. <h1>
  2. <h2>
  3. <h3>
  4. <h4>
  5. <h5>
  6. <h6>
  7. <head>
  8. <header>
  9. ~~<hgroup>~~
  10. <hr>
  11. <html>
8. I
  1. <i>
  2. <iframe>
  3. <img>
  4. <input>
  5. <ins>
  6. ~~<isindex>~~
9. J K
  1. <kbd>
  2. <keygen>
10. L
  1. <label>
  2. <legend>
  3. <li>
  4. <link>
  5. ~~<listing>~~
11. M
  1. <main>
  2. <map>
  3. <mark>
  4. ~~<marquee>~~
  5. <menu>
  6. <menuitem>
  7. <meta>
  8. <meter>
12. N
  1. <nav>
  2. ~~<nobr>~~
  3. ~~<noframes>~~
  4. <noscript>
13. O
  1. <object>
  2. <ol>
  3. <optgroup>
  4. <option>
  5. <output>
14. P
  1. <p>
  2. <param>
  3. <picture>
  4. ~~<plaintext>~~
  5. <pre>
  6. <progress>
15. Q
  1. <q>
16. R
  1. <rp>
  2. <rt>
  3. <rtc>
  4. <ruby>
17. S
  1. <s>
  2. <samp>
  3. <script>
  4. <section>
  5. <select>
  6. <shadow>
  7. <slot>
  8. <small>
  9. <source>
  10. ~~<spacer>~~
  11. <span>
  12. ~~<strike>~~
  13. <strong>
  14. <style>
  15. <sub>
  16. <summary>
  17. <sup>
18. T
  1. <table>
  2. <tbody>
  3. <td>
  4. <template>
  5. <textarea>
  6. <tfoot>
  7. <th>
  8. <thead>
  9. <time>
  10. <title>
  11. <tr>
  12. <track>
  13. ~~<tt>~~
19. U
  1. <u>
  2. <ul>
20. V
  1. <var>
  2. <video>
21. W
  1. <wbr>
22. X Y Z
  1. ~~<xmp>~~

在此页

验证

值

Additional attributes

list

max

min

step

Non Standard Attributes

范例

Specifying the minimum and maximum

Setting the value's granularity

Adding hash marks and labels

Range control mockups

An unadorned range control

A range control with hash marks

A range control with hash marks and labels

Change the orientation

Standards

CSS

HTML

结果

transform: rotate(-90deg)

HTML

CSS

appearance property

HTML

CSS

orient attribute

HTML

writing-mode: bt-lr;

HTML

CSS

全部放在一起

HTML

CSS

规范

浏览器兼容性

图例

另请参阅

相关话题

`list`

`max`

`min`

`step`