input type=range element | input type=range object (Windows)

2 out of 5 rated this helpful - Rate this topic

Creates a slider control for imprecise number input. The range control takes four attributes, min, max, step, and value, to provide control over the range and the value granularity of the control.

HTML5 A vocabulary and associated APIs for HTML and XHTML, Section 4.10.7.1.14

DOM Information

Inheritance Hierarchy

Node

Element

HTMLElement

input type=range

Members

The input type=range object has these types of members:

Properties

Properties

The input type=range object has these properties.

Property	Description
canHaveChildren	Gets a value indicating whether the object can contain child objects.
max	Defines the maximum acceptable value for an input element with type="number".
min	Defines the minimum acceptable value for an input element with type="number".
step	Defines an increment or jump between values that you want to allow the user to enter.
type	Retrieves or initially sets the type of input control represented by the object.
value	Sets or retrieves the displayed value for the control object. This value is returned to the server when the control object is submitted.

Standards information

HTML5 A vocabulary and associated APIs for HTML and XHTML, Section 4.10.7.1.14

Remarks

If the range control isn’t supported in a browser, it will display the value as a normal text field.

Note For code samples, see Form controls part 1 and Form controls part 2: validation on the a Windows Store app using JavaScript sample site.

Examples

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.

HTML


<html>
<head>
    <title>Range and progress example</title>
    <style type="text/css">
    input[type=range]
    {
        padding-left: 0px;
        padding-right: 0px;
    }
    </style>
    <script type="text/javascript">
        function changeValue() {
            document.getElementById("progCtrl").value = document.getElementById("rangeCtrl").value;
        }
        document.addEventListener('DOMContentLoaded', function () {
            document.getElementById("rangeCtrl").addEventListener('change', changeValue, false);
        }, false);
    </script>
</head>
<body>
<progress id="progCtrl" max="100" >Sorry, your browser doesn't support the progress bar.</progress>
<br>
<br>
<input id="rangeCtrl" type="range" min="0" max="100" step="5" value="50"/>
</body>
</html>

input type=range element | input type=range object