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. Entire examples you can see in Opera, Chrome, Safari browsers, other browsers display the current element type="text" instead of slider 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.

Element input type="range" contains a numerical value in the range of attributes min, max with increment step. The value is set by click on the track, by drag the slider, or by using the cursor keys (so far the Opera only). When the element size 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. Value can be a decimal number.

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

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.

id	col 1	col 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

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="47">
<input type="submit" name="bck"  value="«"> page 47 from 100
<input type="submit" name="fwd"  value="»">
<input type="range"  name="page" value="47" min="1" max="100" step="1"
       onchange="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 47 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)">
<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.

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

To use CSS for setting the appearance of an element type="range" is somewhat premature, but still only a few attempts. I tried to get the same scale from Opera to Chrome and Safari. Then I tried to change the shape of the pointer, change the horizontal orientation to vertical and idicate an active element by using the outline style.

The scale can be placed by using the background property, but it's not perfect. Opera does not allow to cancel the original scale, so that the two scales are "fighting" then. It is possible to change the pointer or thumb in Chrome and Safari, Opera does not allow to set custom pointer.

The vertical orientation of the element was successful in Opera, Chrome and Safari. In Opera the orientation is based on the ratio of the width and height properties. Webkit browsers have to use vendor prefix -webkit-appearance: slider-vertical; but then the scale and pointer troubles.

Marking the form element by visible focus style is useful when you want control the element by cursor keys, because those keys are used also for scrolling the page. The focus indicates where the command keys from the keyboard are directed. Focus is only visible in Opera, and only Opera responds to the cursor keys. Following CSS code is used for styling the last two examples.


.rangeH {width: 100px; height: 20px; margin: 0; padding: 0; border: 0;
         background-image: url("../files/rangeScale.png");
         -webkit-appearance: none; background-repeat: no-repeat;}
.rangeH::-webkit-slider-thumb, {-webkit-appearance: none;
         width: 11px; height: 11px;
         background-image: url("../files/rangeThumb.png")}

.rangeH:focus, .rangeV:focus {outline: 1px solid #28f;}

.rangeV {width: 20px; height: 100px; margin: 0; padding: 0;
         -webkit-appearance: slider-vertical;}

Chrome and Safari browsers with help of vendor prefixes are able to render really styling element range. Opera can handle functional element, with limited use of styles. Browsers IE and FF render element range as current element type=text and it is unclear when these browsers will implement the range element.

updated 2023-10-31