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.

Our Services

Targeted Crawlers

Crawlers for content extraction, restoration and competitive intelligence gathering.

Learn More

Gyroscope™ ERP Solutions

Fully integrated enterprise solutions for rapid and steady growth.

Learn More

E-Commerce

Self-updating websites with product catalog and payment processing.

Learn More

Featured Download

Range Slider

Convert an input field to a visual slider that works on any browser, and any device.

Download    Documentation