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:

0 255

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 below.

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:red;"></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:


0 255

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.

0 1000

So we can add buttons that move the slider unit at a time.


  0 1,000  

Here is the HTML:

<span id="slider_value2" style="color:red;font-weight:bold;"></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., http://css3please.com/ and largely a mess

the specific versions of these browsers support different features.

There are three majors range styling specs:

Here are the browser specific pages (i.e., the CSS and HTML for the specifc browser)