input (type=range) element

If you don't know what an element is or how you must use it, I recommend you read the "HTML tags and attributes" tutorial that you can find in the HTML tutorials section.

Description

The input element, having the "range" value in its type attribute, represents a field for the input of a number inside a range, with the caveat that choosing an exact value isn't important. In supporting browsers, range fields are usually represented by something similar to a slider, that moves between the bottom and top margins. This control is a variation of the number input that can perform better in specific situations.

Upon submission, supporting browsers convert the input data into a string representing a number. The rules to compose a valid number are described below.

Números

La sistaxis de un número está compuesta por:

  1. Opcionalmente, un signo menos o guión ("-").
  2. Uno de los siguientes o ambos, en el orden dado:
    1. Uno o más dígitos.
    2. Un punto (".") seguido de uno o más dígitos.
  3. Opcionalmente:
    1. Una letra E (mayúscula o minúscula).
    2. Opcionalmente un signo menos o guión ("-").
    3. Uno o más dígitos.

Ejemplo

468765
24.56
1.54e-31

Browser support for range fields is incomplete. To improve compatibility, authors may have to rely on scripts to provide advanced controls and to check values conformance before submission.

The min and max attributes may be used in this element to set the minimum and maximum values between which the slider can be moved.

Examples

In the first example we'll only create a form with a range control. Here you'll be able to note the functionality provided by your browser (if any) for the control.

<form action="../../form-result.php" method="post" target="_blank">
  <p>Volume: <input type="range" name="volume"> <input type="submit" value="Send data"></p>
</form>

Volume:

Now we can start playing around with other attributes. In this case, we'll set the min and max attributes to change the values the user can pick. In our previous example they weren't present, so the browser used the default values of 0 and 100 respectively.

Additionally we'll set the step attribute, allowing the user only to pick values that are multiples of 15. In this example, you'll be able to see how the slider "jumps" from one value to the next.

<form action="../../form-result.php" method="post" target="_blank">
  <p>
    Amount of red: <input type="range" name="red" min="0" max="255" step="15">
    <input type="submit" value="Send data">
  </p>
</form>

Amount of red:

Laslty, we'll use a datalist to provide a set of predefined suggested values for the user to pick from. Depending on browser implementations, certain features can be added to your slide bar, like snapping or labels.

Remember that to link an input control to a datalist element, the id attribute in the list must match the list attribute in the control.

Browser support for datalist is incomplete. Authors may have to rely on scripts to provide this functionality cross-browser.

<form action="../../form-result.php" method="post" target="_blank">
  <p>
    Current level of caffeine in blood: <input type="range" name="caffeinelevel" list="caffeinelevelslist">
    <input type="submit" value="Send data">
  </p>
</form>
<datalist id="caffeinelevelslist">
  <option value="0" value="Alert!">
  <option value="50" value="Low">
  <option value="100" value="Normal">
</datalist>

Current level of caffeine in blood:

Attributes

Specific attributes

autocomplete

The autocomplete attribute provides information about if and how browsers should automatically suggest options for this control, as an attempt to guess what the user is typing. There are three possible values for this attribute:

  • The value on value, indicating the browser that it should suggest options automatically but not providing any further information about what kind of data is expected in the control.
  • The value off, indicating the browser that it shouldn't suggest options automatically, either because the control's input data is particularly sensitive (like the user to login in a very secure area) or because it's a value that will never be reused (like a one-time-key in a registration process).
  • An autofill detail tokens list, indicating the browser that it should suggest options automatically and specifying what kind of value is expected.

An autofill detail tokens list can be composed by the following tokens in the specified order.

  1. Optionally, a token beginning with the string "section-" (case-insentsitive), indicating the named group to which the field belongs.
  2. Optionally, one of the two following tokens (case-insentsitive):
    • shipping: the field is part of the shipping address.
    • billing: the field is part of the billing address.
  3. Optionally, a token that is a case-insensitive match for one of the following strings:
    • home: meaning the field is for contacting someone at their residence.
    • work: meaning the field is for contacting someone at their workplace.
    • mobile: meaning the field is for contacting someone at their mobile device.
    • fax: meaning the field describes a fax machine's contact details.
    • pager: meaning the field describes a pager's or beeper's contact details

Browsers usually perform autofilling operations by retrieving data from a database containing previous inputs or other sources of user information.

Example

<form action="../../form-result.php" method="post" target="_blank">
  <p>
    Guess the distance: <input type="range" name="distanceguess" autocomplete="off">
    <input type="submit" value="Send">
  </p>
</form>

Guess the distance:

autofocus

A boolean value instructing the browser to set the focus to this control when the document has finished loading or when the dialog where the control finds itself is shown. If the attribute has the value "autofocus" or the empty string (""), or if it's just present, the control should get the focus as soon as possible, after the page or dialog has been loaded.

Example

<p>Brightness: <input type="range" name="brightness" autofocus></p>

disabled

A boolean value indicating wether the control is disabled or not. If the attribute takes the value "disabled" or the empty string (""), or if it's just present, the control will be disabled.

Disabled controls are rendered greyed out (if visible), are blocked from user interaction and, more importantly, their values (if any) aren't sent when the form is submitted.

Example

<form action="../../form-result.php" method="post" target="_blank">
  <p>
    Expected fun: <input type="range" name="expectedfun" disabled>
    <input type="submit" value="Send data">
  </p>
</form>

Expected fun:

form

The value of the id attribute of the form with which this control is associated to.

This attribute is new in HTML5 and helps defining the pertenence of controls in nested or distant forms.

Example

<p>Energy: <input type="range" name="energy" form="form1"></p>
<form id="form1" action="../../form-result.php" method="post" target="_blank">
  <p><input type="submit" value="Send data"></p>
</form>

Energy:

list

A token matching the value of the id attribute of the datalist this control is assopciated with. The datalist referenced by this attribute will provide a number of suggestions that users can pick to autocomplete the control.

Browser support for datalist is incomplete. Authors may have to rely on scripts to provide this functionality cross-browser.

The values provided by the datalist element must conform with the requirements of number strings or be composed by two number strings separated by a comma character (",").

Example

<form action="../../form-result.php" method="post" target="_blank">
  <p>
    Size: <input type="range" name="size" list="sizeslist">
    <input type="submit" value="Send data">
  </p>
</form>
<datalist id="sizeslist">
  <option value="0" label="0%">
  <option value="25" label="25%">
  <option value="50" label="50%">
  <option value="75" label="75%">
  <option value="100" label="100%">
</datalist>

Size:

max

The maximum number the user should be able to pick. Supporting browsers are supposed to disallow the selection of any number greater than the one specified in this attribute.

The value provided in this attribute must conform with the requirements of number strings.

Example

<form action="../../form-result.php" method="post" target="_blank">
  <p>
    Expected results: <input type="range" name="expectedresults" max="10">
    <input type="submit" value="Send data">
  </p>
</form>

Expected results:

min

The minimum number the user should be able to pick. Supporting browsers are supposed to disallow the selection of any number less than the one specified in this attribute.

The value provided in this attribute must conform with the requirements of number strings.

Example

<form action="../../form-result.php" method="post" target="_blank">
  <p>
    Lights level: <input type="range" name="lightslevel" min="50">
    <input type="submit" value="Send data">
  </p>
</form>

Lights level:

name

A name for the control. This name will be sent by the browser to the processing agent, paired with the content of the value attribute. Both attributes together will conform a name-value pair that will be used to process the form data.

Currently, the value isindex, formerly used in a special way by some browsers and included in the HTML standard, isn't permitted in this attribute.

Example

<form action="../../form-result.php" method="post" target="_blank">
  <p>
    Air purity: <input type="range" name="airpurity">
    <input type="submit" value="Send data">
  </p>
</form>

Air purity:

step

A number to be used as the amount of space between an allowed value and the next one. The presence of this attribute reduces the number of choices the user will have by restricting the selection of intermediate values.

The special value any removes the default restriction over the granularity of the control and allows users to input values as specific as they want.

To avoid unexpected behaviors, authors should specify a number to be taken as initial step. This can be done through the attributes min and value. When both are present, the min attribute takes precedence.

The value provided in this attribute must conform with the requirements of number strings.

Example

<form action="../../form-result.php" method="post" target="_blank">
  <p>
    How far did you reach: <input type="range" name="howfarreached" step="10" min="0">
    <input type="submit" value="Send data">
  </p>
</form>

How far did you reach:

type

A value indicating the type of the field that this element represents. There are twenty two possible values (case-insensitive):

  • hidden: a hidden control used to send information to the server, typically managed by scripts.
  • text: a control used to input a single-line piece of text.
  • search: same as text but for search purposes.
  • tel: a control used to provide a telephone number.
  • url: a text box used to input a single and absolute URL.
  • email: a control designed to edit one or more e-mail addresses.
  • password: a text box for editing passwords, where the characters are represented by dots.
  • date: a control to input a specific date.
  • month: a control to input a specific month.
  • week: a control to input a specific week.
  • time: a control to input a specific time.
  • datetime-local: a control to input a specific local date and time.
  • number: a control to input a number.
  • range: a control to input one or two numbers inside a range.
  • color: a control to input a color.
  • checkbox: a control to input a boolean value (true/false).
  • radio: a control used to choose one single option among many.
  • file: a control used to upload files to the server.
  • submit: a button used to submit the form.
  • image: same as submit but with the ability to be shown as an image instead of using the default button appearance.
  • reset: a button used to reset the form's controls to their default values.
  • button: a button with no default action associated.

When this attribute isn't present, the element behaves as it would have the value "text".

Example

<input type="range" name="piecescollected">

value

An initial value for the control, that will be set when the page loads and when the reset button is pressed.

The value provided in this attribute must conform with the requirements of number strings or be composed by two number strings separated by a comma character (",").

Example

<form action="../../form-result.php" method="post" target="_blank">
  <p>Lost pieces: <input type="range" name="lostpieces" value="25"></p>
  <p>
    <input type="submit" value="Send data">
    <input type="reset" value="Reset form">
  <p>
</form>

Lost pieces:

multiple

A boolean value indicating wether the control should accept one or two values as input. If the value in this attribute is "multiple" or the empty string (""), or if the attribute is just present, the control is supposed to take two numbers.

This attribute has been incorporated to the HTML5 standard and, due to lack of implementation by browsers, later removed. Its use is, therefore, invalid.

Example

<form action="../../form-result.php" method="post" target="_blank">
  <p>
    Location of the spot: <input type="range" name="spotlocation" multiple>
    <input type="submit" value="Send data">
  </p>
</form>

Global attributes

For information about global attributes refer to this list of global attributes in HTML5.

Events

Global events

For information about global events refer to this list of global events in HTML5.