HTML 5|input type range|slider|sliders|type=range|input range|range style|range CSS|slider CSS
Capt. Horatio T.P. Webb
&HTML 5 RANGE tag (the slider)
(Tested with styling for IE (10 and above), Chrome (Version 32) and Firefox (Version 27) browsers)
Parks -- Spring 2014 Last Updated 12PM 2/10/2014
The "range" tag (actually a slider) in HTML 5 adds a ver useful HTML form control.
The tag format is:
&range name="name for the HTML DOM"
id="optional id for the DOM" max="maximum value"
min="minimum value"
value="optional initial value when the page loads"
step="change in the range value with each mouse movement
&&&&default step value is one"
&&&&step may be a real number (i.e., contain a decimal point, e.g., 0.25)
&&&&if the value of "min" is contains a real number (e.g., 1.5)
The slider above is made with the tag:
&input type="range" min="0" max="255" name="sld" value="47"&
We will generally want to show the minimum and maximum values of the the slider as text before and after the slider tag like this:
0 &input type="range" min="0" max="255" name="sld2" value="47"& 255
which would appear like this:
In the IE browser, the slider value is displayed when you move the slider. This is NOT true in other browsers.
This is an advantage to IE -- but the creepy blue background and other presentation options cane be changed in IE can be changed .
As a general rule, to add the display of the current value of the slider, we can use a little javascript. First we will add
a SPAN block with red text to hold the value of the slider like this:
&span id="slider_value"
style="color:"&&/span&
and this slider:
&input width="400" type="range" min="0" max="255" name="sld3" value="47" onchange=""show_value(this.value);"&
In the &head&, we have this javascript function to get the value of the slider when it changes and display it in the SPAN:
function show_value(x)
document.getElementById("slider_value").innerHTML=x;
and the HTML looks like this:
Our now SPAN shows the value (as does IE's built in range display), but our SPAN value remains displayed after IE's display disappears when the user finishes the change).
Suppose the slider is for values between zero and 1,000. Thsi makes the selection process difficult. If we have:
&input type="range" min="0" max="1000"&
It looks like this and it is difficult to get a precise value.
So we can add buttons that move the slider unit at a time.
Here is the HTML:
&span id="slider_value2" style="color:font-weight:"&&/span&&br&
&input type="button" value="-" onClick="subtract_one()"&
0 &input type="range" min="0" max="1000" step="1" name="sld6" value=477" onchange="show_value2(this.value)"& 1,000&
&input type="button" value="+" onClick="add_one()"&
and the javascript would be:
function show_value2(x)
document.getElementById("slider_value2").innerHTML=x;
function add_one()
document.f.sld6.value=parseInt(document.f.sld6.value)+1;
show_value2(document.f.sld6.value);
function subtract_one()
document.f.sld6.value=parseInt(document.f.sld6.value)-1;
show_value2(document.f.sld6.value);
Range Tag Styling
There are some browser specific styling options for the range tag.
In fact there are many of these browser specific styling options (see e.g.,
and largely a mess
-webkit- for: Apple's Safari browser, Google's Chrome browser
-moz- for Firefox's Gecko browser
-o- for the Opera browser (now -webkit-)
-ms- for Microsoft's IE 9 and above browser
the specific versions of these browsers support different features.
Opera (first version 1996), now in version 19.9 (as of Feb 2014)
Apple's Safari (first version 2003) now version 5.1.7 (as of Feb 2014)
Google's Chrome (first version 2008) now version 34 (as of Feb 2014)
Microsoft Internet Explorer (first version 1995), now version 11 (as of Feb 2014)
Firefox (child of Netscape below grandchild of Mosaic, first version 2004) version 24 (as of Feb 2014)
Mosaic (the first one Jan 1993 discontinued 1997)
Netscape (1994 by many of the original Mosaic authors but (NO Mosaic code), acquired by AOL in 2000, discontinued 2008)
There are three majors range styling specs:
-ms- (the code below will only show correctly in Microsoft Internet Explorer browser 10 and above)
For IE there are some specific psuedo-elements like these for the range tag:
::-ms-fill-lower
allows styling of the track to the left of the thumb
::-ms-fill-upper
allows styling of the track to the right of the thumb
::-ms-thumb
allows styling of the thumb
::-ms-ticks-after
allows styling of the tick marks below the track
::-ms-ticks-before
allows styling of the tick marks above the track
::-ms-tooltip
allows styling of the tooltip of the slider (i.e., the block that you actually slide)
::-ms-track
allows styling of the track
where the HTML is:
&input type="range" class="fred1" min="0" max="100" name="sld7"&
and the CSS is:
&style type="text/css"&
input[type=range].fred1::-ms-fill-lower { background-color:#3333 }
input[type=range].fred1::-ms-fill-upper { background-color:#9999 }
input[type=range].fred1::-ms-thumb
{ border:solid black 1 background-color: border-radius:6
width: 12 height: 12 }
input[type=range].fred1::-ms-track{ height:14 }
One drawback of the IE flexibility is that the slider thumb (the thing you move with the mouse) CANNOT be taller than the slider track.
(Chrome -- the code below will ONLY show up correctly in the Chrome browser)
where the HTML is:
&input type="range" class="fred2" min="0" max="100" name="sld8"&
and the CSS is:
input[type="range"].fred2 {
-webkit-appearance:
-webkit-background-color:
-webkit-height: 2
input[type="range"].fred2::-webkit-slider-thumb {
-webkit-appearance:
height: 12
border:solid black 1
background-color:
-webkit-border-radius: 6
-moz (Firefox -- the code below will ONLY show up correctly in the Firefox browser)
where the HTML is:
&input type="range" class="fred3" min="0" max="100" name="sld9"&
and the CSS is:
input[type='range'].fred3 {
-moz-appearance:
input[type=range].fred3::-moz-range-track {
-moz-appearance:
background-color: #0000
input[type=range].fred3::-moz-range-thumb {
-moz-appearance:
border:solid black 1
background:
border-radius:6
height: 12
NOTE: this fails without the extra CSS shown first above. It cuts off the defaults apparently.
Here are the browser specific pages (i.e., the CSS and HTML for the specifc browser)HTML5 &input& 标签
HTML5 &input& 标签
定义和用法
&input& 标签规定用户可输入数据的输入字段。
根据不同的 type 属性，输入字段有多种形态。输入字段可以是文本字段、复选框、密码字段、单选按钮、按钮等等。
带有两个输入字段和一个提交按钮的简单的 HTML 表单：
&form action=&form_action.asp& method=&get&&
First name: &input type=&text& name=&fname& /&
Last name: &input type=&text& name=&lname& /&
&input type=&submit& value=&提交& /&
HTML 4.01 与 HTML 5 之间的差异
在 HTML 4.01 中，&align& 属性已被废弃，HTML5 不支持该属性。请使用 CSS 对 input 元素进行对齐操作。
HTML5 中的 &input& 标题拥有许多新的属性。
HTML5 中的 type 属性拥有许多新的值。
提示和注释
注释：input 元素是空的，它只包含属性。
提示：请使用 label 元素为表单控件定义标签（label）。
new : HTML5 中的新属性。
list_of_mime_types
规定可通过文件上传控件提交的文件类型。
（仅适用于 type=&file&）
规定图像输入控件的替代文本。
（仅适用于 type=&image&）
autocomplete
规定是否使用输入字段的自动完成功能。
规定输入字段在页面加载时是否获得焦点。
（不适用于 type=&hidden&）
规定当页面加载时是否预先选择该 input 元素。
（适用于 type=&checkbox& 或 type=&radio&）
规定当页面加载时是否禁用该 input 元素。
（不适用于 type=&hidden&）
规定输入字段所属的一个或多个表单。
formaction
覆盖表单的 action 属性。
（适用于 type=&submit& 和 type=&image&）
formenctype
覆盖表单的 enctype 属性。
（适用于 type=&submit& 和 type=&image&）
formmethod
覆盖表单的 method 属性。
（适用于 type=&submit& 和 type=&image&）
formnovalidate
formnovalidate
覆盖表单的 novalidate 属性。
如果使用该属性，则提交表单时不进行验证。
formtarget
覆盖表单的 target 属性。
（适用于 type=&submit& 和 type=&image&）
定义 input 字段的高度。（适用于 type=&image&）
datalist-id
引用包含输入字段的预定义选项的 datalist 。
规定输入字段的最大值。
请与 &min& 属性配合使用，来创建合法值的范围。
规定文本字段中允许的最大字符数。
规定输入字段的最小值。
请与 &max& 属性配合使用，来创建合法值的范围。
如果使用该属性，则允许一个以上的值。
field_name
规定 input 元素的名称。
name 属性用于在提交表单时搜集字段的值。
regexp_pattern
规定输入字段的值的模式或格式。
例如 pattern=&[0-9]& 表示输入值必须是 0 与 9 之间的数字。
placeholder
规定帮助用户填写输入字段的提示。
指示字段的值无法修改。
指示输入字段的值是必需的。
number_of_char
规定输入字段中的可见字符数。
规定图像的 URL。（适用于 type=&image&）
规定输入字的的合法数字间隔。
datetime-local
规定 input 元素的类型。
对于按钮：规定按钮上的文本
对于图像按钮：传递到脚本的字段的符号结果
对于复选框和单选按钮：定义 input 元素被点击时的结果。
对于隐藏、密码和文本字段：规定元素的默认值。
注释：不能与 type=&file& 一同使用。
注释：对于 type=&checkbox& 以及 type=&radio&，是必需的。
定义 input 字段的宽度。（适用于 type=&image&）此类型要求输入格式正确的email地址,否则浏览器是不允许提交的,并会有一个错误信息提示.此类型在Opera中必须指定name值,否则无效果.
&input type=email &
要求输入格式正确的URL地址,Opera中会自动在开始处添加http://.
&input type=url &
要求输入格式数字，默认会有上下两个按钮，opera支持更好
&input type=number &
此类型要求输入一个电话号码,但实际上它并没有特殊的验证,与text类型没什么区别.
&input type=tel &
此类型将显示一个可拖动的滑块条,并可通过设定max/min/step值限定拖动范围.拖动时会反馈给value一个值.
&input type=range min=20 max=100 step=2 &
此类型表单,可让用户通过颜色选择器选择一个颜色值,并反馈到value中,可以设置默认值
&input type=color value=#ff0000 &
&input type=month &
&input type=week &
表单验证属性为require类型时,若输入值为空,则拒绝提交,并会有一个提示.这个很有用.并且可以用于textarea以及hidden/image/submit类型.
&input type=text required &
pattern类型为正则验证,可以完成各种复杂的验证.这两种类型在Opera中必须指定name值,否则无效果.
&input type=email required pattern=\w+@[a-z0-9]+\.[a-z]+/g &
placeholder
这是一个很实用的属性,免去了用JS去实现点击清除表单初始值.浏览器支持也还不错,标准浏览器都能很好的支持.
&input type=text placeholder="your message" &
默认聚焦属性,可在页面加载时聚焦到一个表单控件,类似于JS的focus().
&input type=text autofacus="true" &
该属性需要与datalist属性共用,datalist是对选择框的记忆,而list属性可以为选择框自定义记忆的内容.
&input&type="text"&list="ilist"&
&datalist&id="ilist"&
&&&&&option&label="a"&value="a"&aaaaa&/option&
&&&&&option&label="b"&value="b"&bbbbb&/option&
&&&&&option&label="c"&value="c"&ccccc&/option&
&/datalist&
autocomplete
此属性是为表单提供自动完成功能.如果该属性为打开状态可很好地自动完成.一般来说,此属性必须启动浏览器的自动完成功能.
&input type=text autocomplete="on" &
keygen 标签规定用于表单的密钥对生成器字段。当提交表单时，私钥存储在本地，公钥发送到服务器。所有主流浏览器都支持 keygen 标签，除了 Internet Explorer 和 Safari。
&keygen name="keygen" /&
datalist 标签定义选项列表。与 input 元素配合使用该元素，来定义 input 可能的值。datalist 及其选项不会被显示出来，它仅仅是合法的输入值列表。
用 input 元素的 list 属性来绑定 datalist。
&label for="search">搜索引擎&/label&
&input type="url" name="search" id="search" list="searchlist" autocomplete="on" pattern="https?://.+" /&
&datalist id="searchlist"&
　　&option value="/" &
　　&option value="/" &
　　&option value="/" &
&/datalist&
output 标签定义不同类型的输出，比如脚本的输出。
演示地址：
meter 标签定义度量衡。仅用于已知最大和最小值的度量。
演示地址：
progress 标签定义运行中的进度（进程）。可以使用 progress 标签来显示 JavaScript 中耗费时间的函数的进度。
演示地址：
contenteditable
此属性可以让摸个元素里面的文本节点或值变为可编辑
&p contenteditable="true" &可以编辑的内容&/p&
可以编辑的内容
form表单演示
请输入搜索内容
你的位置：
文档和属性参考手册，致力于HTML5技术的推荐和进步|from: | blog:|tool:|links:input type=range element | input type=range object - Windows app development
input type=range
Expand the table of content
input type=range element | input type=range object
Creates a slider control for imprecise number input. The range control takes four attributes, , , , and , to provide control over the range and the value granularity of the control.
DOM Information
Inheritance Hierarchy
input type=range
The input type=range object has these types of members:
The input type=range object has these events.
EventDescription
Fires when the user clicks the left mouse button on the object.
Starting with IE11, this event fires a
object instead of
. You can use the MouseEvent. property to determine the type of contact that the click originated from (touch, mouse, or pen).
Fires when the user aborts the download.
Fires when the object is set as the .
Fires immediately before the object is set as the .
Fires when the object loses the input focus.
Fires when the contents of the object or selection have changed.
Fires when the user clicks the right mouse button in the client area, opening the context menu.
Starting with IE11, this event fires a
object instead of . You can use the MouseEvent. property to determine the type of contact that the click originated from (touch, mouse, or pen).
Fires when the user double-clicks the object.
Starting with IE11, this event fires a
object instead of a . You can use the MouseEvent. property to determine the type of contact that the click originated from (touch, mouse, or pen).
Fires when the
is changed from the current object to another object in the parent document.
Fires on the source object continuously during a drag operation.
Fires on the source object when the user releases the mouse at the close of a drag operation.
Fires on the target element when the user drags the object to a valid drop target.
Fires on the target object when the user moves the mouse out of a valid drop target during a drag operation.
Fires on the target element continuously while the user drags the object over a valid drop target.
Fires on the source object when the user starts to drag a text selection or selected object.
Fires on the target object when the mouse button is released during a drag-and-drop operation.
Fires when an error occurs during object loading.
Fires when the object receives focus.
Fires for an element just prior to setting focus on that element.
Fires for the current element with focus immediately after moving focus to another element.
Occurs when the text content of an element is changed through the user interface.
Fires when the user presses a key.
Fires when the user presses an alphanumeric key.
Fires immediately after the client loads the object.
Fires when the user clicks the object with either mouse button.
Fires when the user moves the mouse pointer into the object.
Fires when the user moves the mouse pointer outside the boundaries of the object.
Fires when the user moves the mouse over the object.
Fires when the user moves the mouse pointer outside the boundaries of the object.
Fires when the user moves the mouse pointer into the object.
Fires when the user releases a mouse button while the mouse is over the object.
Fires when certain HTML elements are resized.
Fires immediately before the
is changed from the current object to another object in the parent document.
Fires when the user releases a key.
Fires when the current selection changes.
Fires on the target object when the user pastes data, transferring the data from the system clipboard to the document.
Fires when the state of the object has changed.
Fires when the user resets a form.
Fires when the size of the object is about to change.
Fires when the user repositions the scroll box in the scroll bar on the object.
The input type=range object has these methods.
MethodDescription
Appends an element as a child to the object.
Makes the element either a child or parent of another element.
Causes the element to lose focus and fires the
Removes all attributes and values from the object.
Simulates a click by causing the
event to fire.
Copies a reference to the object from the document hierarchy.
Compares the position of two nodes in a document.
Returns the component located at the specified coordinates via certain events.
Checks whether the given element is contained within the object.
object for the element.
is no longer supported. Starting with IE11, use
or . For info, see .
Simulates a click on a scroll bar component.
Initiates a drag event.
Causes the element to receive the focus and executes the code specified by the
Returns the adjacent text string.
Retrieves the value of the specified attribute.
Retrieves an
object referenced by the attribute. property.
object that matches the specified namespace and name.
Gets the value of the specified attribute within the specified namespace.
Retrieves an object that specifies the bounds of a collection of
Retrieves a collection of rectangles that describes the layout of the contents of an object or range within the client. Each rectangle describes a single line.
Gets a collection of objects that are based on the value of the
attribute.
Gets a collection of objects that are based on the specified element names within a specified namespace.
Determines whether an attribute with the specified name exists.
Determines whether an attribute that has the specified namespace and name exists.
Determines whether one or more attributes exist for the object.
Returns a value that indicates whether the object has children.
Inserts an element at the specified location.
Inserts the given HTML text into the element at the location.
Inserts the given text into the element at the specified location.
Inserts an element into the document hierarchy as a child node of a parent object.
Indicates whether or not a namespace is the default namespace for a document.
Determines if two nodes are equal.
Determines if two node references refer to the same node.
Returns a value indicating whether or not the object supports a specific DOM standard.
Gets the URI of the namespace associated with a namespace prefix, if any.
Gets the namespace prefix associated with a URI, if any.
Copies all read/write attributes to the specified element.
Determines whether an object matches the specified .
Merges adjacent DOM objects to produce a normalized document object model.
Retrieves the first DOM
element node from descendants of the starting element node
that match any selector within the supplied selector string.
Retrieves all DOM
element nodes from descendants of the starting element node
that match any selector within the supplied selector strings.
Removes an attribute from an object.
Removes an
object from the object.
Removes the specified attribute from the object.
Removes a child node from the object.
Removes the object from the document hierarchy.
Replaces the text adjacent to the element.
Replaces an existing child element with a new child element.
Replaces the object with another element.
Causes the object to scroll into view, aligning it either at the top or bottom of the window.
Highlights the input area of a form element.
Sets the object as active without setting focus to the object.
Sets the value of the specified attribute.
object node as part of the object.
object as part of the object.
Sets the value of the specified attribute within the specified namespace.
Sets the start and end positions of a selection in a text field.
Exchanges the location of two objects in the document hierarchy.
Properties
The input type=range object has these properties.
PropertyAccess typeDescription
Sets or retrieves the access key for the object.
Specifies whether the element and its contents must be selected as a whole, indivisible unit.
Retrieves a collection of attributes of the object.
This property is not supported for Windows Store apps using JavaScript.
Gets a value indicating whether the object can contain child objects.
Retrieves the value indicating whether the object can contain rich HTML markup.
Retrieves the number of immediate child nodes of the current element or a zero if the element does not contain any child nodes.
does not return all child nodes, only child nodes that are
=1, or element nodes.
Sets or retrieves the class of the object.
Retrieves the height of the object including padding, but not including margin, border, or scroll bar.
Retrieves the distance between the
property and the true left side of the client area.
Retrieves the distance between the
property and the true top of the client area.
Retrieves the width of the object including padding, but not including margin, border, or scroll bar.
Sets or retrieves the string that indicates whether the user can edit the content of the object.
Sets or retrieves a field of a given data source, as specified by the
property, to bind to the specified object.
Sets or retrieves the source of the data for data binding.
Sets or retrieves the initial contents of the object.
Sets or retrieves the reading order of the object.
Sets or retrieves a value that indicates whether the user can interact with the object.
Gets a reference to the first child in the
collection of the object.
Retrieves a reference to the first child element, or NULL if there are no child elements.
Retrieves a reference to the form that the object is embedded in.
Sets or gets the value that indicates whether the object visibly shows that it has focus.
Sets or retrieves the string identifying the object.
Sets or retrieves the HTML between the start and end tags of the object.
Sets or retrieves the text between the start and end tags of the object.
Gets the value that indicates whether the user can edit the contents of the object.
Gets the value that indicates whether the user can interact with the object.
Retrieves the value indicating whether the content of the object contains one or more lines.
Retrieves whether a
object can be created using the object.
Sets or retrieves the language to use.
Gets a reference to the last child in the
collection of an object.
Retrieves a reference to the last child element or NULL if there are no child elements.
Retrieves the local name of the fully qualified XML declaration for a node.
Read/write
Defines the maximum acceptable value for an input element with type="number".
Sets or retrieves the maximum number of characters that the user can enter in a text control.
Read/write
Defines the minimum acceptable value for an input element with type="number".
Sets or retrieves the name of the object.
Retrieves the namespace URI of the fully qualified XML declaration for a node.
Retrieves a reference to the sibling element that immediately follows or NULL if the element does not have any sibling elements that follow it.
Retrieves a reference to the next child of the parent for the object.
Gets the name of a particular type of node.
Retrieves the type of the requested node.
Gets or sets the value of a node.
Retrieves the height of the object relative to the layout or coordinate parent, as specified by the
Retrieves the calculated left position of the object relative to the layout or coordinate parent, as specified by the
Retrieves a reference to the container object that defines the
properties of the object.
Retrieves the calculated top position of the object relative to the layout or coordinate parent, as specified by the
Retrieves the width of the object relative to the layout or coordinate parent, as specified by the
Sets or retrieves the object and its content in HTML.
Sets or retrieves the text of the object.
Retrieves the
object associated with the node.
Retrieves the parent object in the object hierarchy.
Retrieves the parent object in the document hierarchy.
Retrieves the container object in the document hierarchy that can be used to create a
containing the original object.
Retrieves the local name of the fully qualified XML declaration for a node.
Retrieves a reference to the immediately preceding sibling element or NULL if the element does not have any preceding siblings.
Gets a reference to the previous child of the parent for the object.
Retrieves a value that indicates the current state of the object.
Sets or retrieves the role for this element.
Retrieves the scrolling height of the object.
Sets or retrieves the distance between the left edge of the object and the leftmost portion of the content currently visible in the window.
Sets or retrieves the distance between the top of the object and the topmost portion of the content currently visible in the window.
Retrieves the scrolling width of the object.
Gets or sets
the end position or offset of a text selection.
Gets or sets
the starting position or offset of a text selection.
Retrieves the ordinal position of the object, in source order, as the object appears in the document's
collection.
Read/write
Specifies whether spell checking is applied to an editable text field.
Read/write
Defines an increment or jump between values that you want to allow the user to enter.
Sets an inline style for the element.
Sets or retrieves the index that defines the tab order for the object.
Retrieves the tag name of the object.
Sets or retrieves the text content of an object and any child objects.
Sets or retrieves advisory information (a ToolTip) for the object.
Retrieves or initially sets
the type of
control represented by the object.
Retrieves an autogenerated, unique identifier for the object.
Retrieves the element's unique number.
Sets or retrieves the displayed value for the control object.
This value is returned to the server when the control object is submitted.
Sets or retrieves the vCard value of the object to use for the AutoComplete box.
Standards information
, Section 4.10.7.1.14
If the range control isn’t supported in a browser, it will display the value as a normal text field.
For code samples, see
on the a Windows Store app using JavaScript sample site.
This example uses the INPUT type=range element to create a slider control provides input to an HTML5 progress control. When you first load the page, the progress element is in indeterminate mode (no value assigned) and just shows activity. When you move the slider bar, the value is assigned to the progress control, and they’ll move in sync.
&title&Range and progress example&/title&
&style type="text/css"&
input[type=range]
padding-left: 0
padding-right: 0
&script type="text/javascript"&
function changeValue() {
document.getElementById("progCtrl").value = document.getElementById("rangeCtrl").
document.addEventListener('DOMContentLoaded', function () {
document.getElementById("rangeCtrl").addEventListener('change', changeValue, false);
}, false);
&progress id="progCtrl" max="100" &Sorry, your browser doesn't support the progress bar.&/progress&
&input id="rangeCtrl" type="range" min="0" max="100" step="5" value="50"/&
IN THIS ARTICLE
Is this page helpful?
Additional feedback?
1500 characters remaining
Thank you!
We appreciate your feedback.