<input> - range


HTML DOM Input Range object


Input Range object

The Input Range object is new to HTML5.

An Input Range object represents an HTML <input> element using the type="range" attribute.

Note: Internet Explorer 9 and earlier versions of IE do not support HTML <input> elements with the type="range" attribute.

Access the Input Range object

You can use the getElementById() function to access <input> elements with the type="range" attribute:

var x = document.getElementById("myRange");

 Try It! 

Tip: You can also access the Input Range object through the form's elements collection.

Create an Input Range object

You can use the document.createElement() method to create <input> elements with the type="range" attribute:

var x = document.createElement("INPUT");
x.setAttribute("type", "range");

 Try It! 

Input Range Object Attributes

AttributeDescription
autocompleteSets or returns the value of the autocomplete property of the slider control
autofocusSets or returns whether the slider control automatically gets focus after page load
defaultValueSets or returns the default value of the slider control
disabledSets or returns whether the slider control is available
formReturns a reference to the form that uses the slider control
listReturns a reference to the datalist containing the slider control
maxSets or returns the max property value of the slider control
minSets or returns the value of the slider control's min property
nameSets or returns the value of the slider control's name property
stepSets or returns the value of the step property of the slider control
typeReturns the form type of the slider control
valueSets or returns the value of the slider control's value property

Standard Properties and Events

Input Range objects also support standard properties and events .


Related articles

HTML Tutorial: HTML Forms

HTML Reference Manual: HTML <input> Tag

HTML Reference Manual: HTML <input> type attribute