A Range Slider for Mobile and All

Sometimes we just want to accomplish something rather simple. And often enough we are blessed with convenient options to get the job done.

One example is to express a regular input field as a range slider. There's an HTML5 tag that does just that:

<input type="range" min="10" max="200" value="50">

Unfortunately but not surprisingly, the "range" type is not supported in Internet Explorer or even Firefox. Sure you can summon jQuery if you don't care about mobile devices. But now there's a widget that loads faster and works on touch-enabled devices.

The above slider uses our range slider widget:

<?php

include 'showrangeslider.php';

showrangeslider('input1',250,10,200,50);

?>

<input id="input1" value="50">

<script src="nano.js"></script>

<script src="sliders.js"></script>

Apart from library references, the slider is linked to the input field in one line of code.

The full syntax of the showrangeslider function:

showrangeslider(containerid, slider_width, min, max, initial_value);

Beneath the simple function call is 32 lines of JavaScript and 12 lines of templatized HTML. The widget supports a much wider range of browsers than jQuery. We tested the slider on IE5.0 just to prove a point.