You are here: Reference > HTML > tags > input:range

input:range element

Browser support:
Creates a slider control.
With the slider control the user can set a value by moving an indicator. The lowest and the highest values of the slider control can be set with the min and max attributes. The step attribute defines the step size. The value of the control can be set with the value attribute.
This control is one of the form controls.
The contents of the control can be submitted to a server if the following conditions are met:
  • A form element must contain the slider control.
  • The action attribute of the container form must be set to the URL of the server.
  • The name attribute of the slider control must be specified and non-empty.
When the container form is submitted, the name and the value of the control are sent as a name/value pair.
If you want to see the HTML tags by categories, please visit this page.
This element cannot have a closing tag.
JavaScript page for this element: input:range.

Possible members:

Attributes
Events
Styles
Pseudos
accessKey
Sets an access key to an element.
class
Sets the style class or classes that belong to the element.
contentEditable
Sets whether the contents of the object are editable.
dir
Sets the text direction as related to the lang attribute.
DISABLED
Sets the state of an object for user interaction.
hSpace
Specifies the number of pixels to use as a margin at the left and right sides of the object.
id
Sets a unique identifier for the object.
lang
Specifies the language of the element.
max
Sets the maximum value of a range type input object (slider).
min
Sets the minimum value of a range type input object (slider).
name
Sets the name of a form control that affects the contents of the message submitted to the server.
READONLY
Sets whether the contents of the element are changeable.
size
Specifies the width of a control, in characters.
step
Sets the discrete step size of the input:range element.
style
Sets an inline style associated with an element.
tabIndex
Specifies the tabbing order for keyboard navigation using the TAB key.
title
Specifies a tooltip for an element.
type
Sets the type of the input element.
value
Specifies the initial value for a control element.
vSpace
Specifies the number of pixels to use as a margin at the top and bottom sides of an object.

Example HTML code 1:

This example illustrates the use of the slider control:
<form method="post" action="#URL#">
    Username: <input type="text" name="userName" />
    <br /><br />
    Your bet: <input type="range" name="bet" min="20" max="200" step="20" value="40" />
    <br /><br />
    <input type="submit" value="Send" />
</form>
Did you find this example helpful? yes no

External links:

User Contributed Comments

Post Content

Post Content