site logo

Experiments with form element input type="range"

Form element input type="range", sometimes called a slider, and its practical use in several examples, is descibed in this article. All examples you can see in all modern browsers, IE browser displays the current element type="text" instead of range element and examples are not functional. Cross browser solution of slider based on conventional HTML elements and JavaScript can be found at the page time and date, or in the article Ajax on the server.

The value is set by click on the track, by drag the thumb by mouse, or by using the cursor keys. When the size of element in pixels is less than the total possible number of steps and mouse is not precise enough, by the cursor keys even "subpixel" value can be set. The value of range element can assume an integer or decimal number.

The element advantage is continuous adjustment and an optical feedback of actual value to the full range. Using is rather as an interactive element in applications, than entering value in the current form. After all, can you imagine the volume control using a textbox element and typing numbers?

Attributes of element input type="range"

Form element input type="range" can contain a numeric value in interval limited by attributes min and max. Attribute step defines the increment value. The value attribute determines the position of the slider. Scale or ruler is drawn with help of attribute list, along with the tags datalist and option. All these attributes have to hold a numeric value, in case of decimal number, the decimal point as a separator have to be used.

Changing the appearance of input type="range" with CSS

0
0

Following live type="range" examples prove orientation of element, drawing the tics, indicating active element with the outline property. Both samples are completed with display of the current value, it is not part of the element. To figure the value of element, javascript is necessary.

Element dimensions are set by the CSS properties width, and height. In Chrome, Safari and Opera for vertical orientation have to be used a vendor prefix: -webkit-appearance: slider-vertical; In Firefox atribut orient="vertical" have to be used.

Using attribute list  for drawing the tics is shown in the code below. The tics are set for the vertical element and are visible as a small marks on the right of the track of the element. The distance of tics are intentionally not linear. The tics are drawn properly in Chrome, Safari and Opera 15.

It is good practice to highlight the active element of the form using pseudo class focus. The focus indicates where the command keys from the keyboard are directed. In the case of element range, the cursor keys move the slider to set a value. The focus in the first example is activated by the attribute autofocus.

Following CSS code is used for styling the last two examples.

CSS:
.rangeH {width: 100px; height: 20px; margin: 0; padding: 0;}
.rangeV {width: 20px; height: 100px; margin: 0; padding: 0;
         -webkit-appearance: slider-vertical; color: #00c;}

HTML:
<input type="range" class="rangeH" min="0" max="9" step="1" autofocus ... >

<input type="range" class="rangeV" min="0" max="9" step="1" list="mark" ... >
<datalist id="mark">
  <option>0</option>
  <option>1</option>
  <option>2</option>
  <option>5</option>
  <option>9</option>
</datalist>

In addition, some practical possibilities of using of an input type="range" follows.

Paging through input type="range"

Database tables with thousands of records usually requires paging when browsed, that means one page displays only some fraction of the database, the rest of records are displayed using the paging navigation. Experimental paging form allow standard move to previous / next page by button click, or the direct move to any page by using input type="range" element.

idcol 1col 2---
1000---------
999---------
998---------
997------ 
996------Simulated database table containing 1000 records.
995------Page size is set to 10 records per one page.
994------ 
993---------
992---------
991---------
page 100 from 100    

In case you do not see a form similar to following screenshot, use Chrome or Opera browser.

range element as paging

At first the database page is loaded with the latest record at the top and a thumb of range element is on the right side (at the end of database). For reading data page by page buttons marked as: « » are used. When specific page is required, the slider and submit button are used. Only valid page number can be indicated by range element, therefore no validation on client side is required.

HTML:
<form method="get"   name="f1" action="range.asp">
<input type="hidden" name="act"  value="68">
<input type="submit" name="bck"  value="«"> page 68 from 100
<input type="submit" name="fwd"  value="»">
<input type="range"  name="page" value="68" min="1" max="100" step="1"
       onchange="fn1(page.value)"  onInput="fn1(page.value)" />
<input type="submit" name="subm" value="set slider" id="subm">
</form>

JavaScript:
function fn1(x) {
  document.getElementById("subm").value = "load page " + x;
}

HTML code for paging form displays situation after page number 68 was requested. The red numbers are inserted by server script at page generating. The server script have to calculate the total number of records in the database table, according requested page number and page size, server loads the required records and format data into HTML table and set parameters of paging form.

Setting the date and time using input type="range"

Setting the date and time in the intranet forms is often used to specify some events (downtime, job change in production line, scheduling, etc.). What might look like entering the time and date using the component input type=range is shown in the following experiment.

   

In non-stop production a working day is in general split into three working shifts. Due to the working shift rotation, working day begins at 06:00 in the morning and ends at 05:59 following morning. Production data is usually related to a particular shift and manufacturing date. This fact is taken into account in above form example for setting time of event. Time resolution is set up for 10 minutes.

HTML:
<form method="get"  name="f2" action="range.asp">
<input type="range" name="dt"
 min="1325307600000"
 max="1325393400000"
 step="600000" onChange="dtToStr(dt.value)" onInput="dtToStr(dt.value) />
<input type="text" name="inpDt" id="inpDt" value="...">
</form>

JavaScript:
function dtToStr(n) {
  var dto = new Date(0);
  dto.setMilliseconds(n);
  var s = dto.getFullYear() + "-" + (dto.getMonth() + 1) + "-" + dto.getDate();
  var tm = dto.getHours();
  s += " ";
  s += (tm < 10) ? "0" + tm : tm;
  tm = dto.getMinutes();
  s += ":" 
  s += (tm < 10) ? "0" + tm : tm;
  document.getElementById("inpDt").value = s;
}

Attributes min, max and step of the range element are set to meet JavaScript Date object, this corresponds to the number of milliseconds since January 1, 1970, and therefore so large numbers. Values marked as red specify the beginning and the end of the working day and actual value have to be calculated according to actual date. Time resolution is determined by the value of the step attribute. As Date object contains a lot of methods for conversion of numeric values to date string, custom function for ISO format is used here.

input type="range" as checkbox

live form

Form element range, or the slider can be used as on-off switch, or as a checkbox. Element range is set so that it can obtain only two possible values: 0/1. Two images are used: one for background of element, the second is used as a slider. The slider shows/hides the active/inactive state of element (part of background image). Try live form on the right please.

It is not exactly intuitive to process classic checkbox  value on the server. Saving the state of the checkbox in the database and restore the HTML form code from the database requires a lot of testing if {...} else {...}  When saving, it is necessary to test if the form collection contains name=value of intended checkbox. To restore the form content requires similar test whether or not to insert the attribute checked into the checkbox. The experimental element switchbox can save and restore the value of the element (0/1) directly, without any tests.

To modify the appearance of element by using CSS is not the same in Chrome and Firefox browsers. This is demonstrated in the following code for styling of switch example. Notice the difference in the names of CSS selectors for the thumb and track (code red).

CSS:
input[type='range'].swB {
 width: 86px; height: 26px;
 -webkit-appearance: none; background-image: url("../files/rangeSwBg.png");
}
/* --- webkit --- */
input[type='range'].swB::-webkit-slider-thumb {
 width: 43px; height: 26px; -webkit-appearance: none;
 background-image: url("../files/rangeSwThumb.png");
}
/* --- gecko --- */
input[type='range'].swB::-moz-range-thumb {
 width: 43px; height: 26px; border-radius: 0; border: 0;
 background-image: url("../files/rangeSwThumb.png");
}
/* --- gecko --- */
input[type='range'].swB::-moz-range-track {
 width: 0;
}

HTML:
<input type="range" class="swB" name="cB" min="0" max="1" step="1" value="0">

Browsers Chrome, Safari, and Opera use similar rendering engine, therefore the elements look similar. Firefox uses a different rendering engine and probably tests different display options and behavior of the element range. In Firefox you can find the following differences: vertical view requires the use of attribute, to draw a scale is not possible yet, the thumb look depends on the use of background property that changes the shape of the thumb from square to circular. Updating the value is done when the thumb is released, or when element loses focus at keyboard setting.

FireFox and now Chrome 34 also uses uniform events. Event onChange() makes the value change until you release the mouse while dragging the pointer. For the non-stop value change event onInput() have to be be used. However, onInput event is not supported in IE10, so the best way is to combine the two event handlers.

updated 2013-11-22