Awesome
html5slider
a JavaScript implementation of HTML5 <input type=range>
for Firefox
html5slider is a polyfill that:
- transforms all
<input type=range>
elements from plain textboxes to draggable sliders on-the-fly automatically, - supports
min
,max
,step
,oninput
, andonchange
, - and is the only polyfill that provides native styling for the slider widgets.
Firefox 23 added built-in support for this widget, so this polyfill only applies to Firefox 16 - 22.
Try out a live demo!
To use html5slider, simply reference html5slider.js in your page as an external script. For example:
<script src="html5slider.js"></script>
The source code is available under the MIT license.
For more information about HTML5 and <input type=range>
, check out the
fantastic online guide "Dive Into HTML5" by Mark Pilgrim:
http://diveintohtml5.info/forms.html#type-range
For more HTML5 polyfills and shims, check out this collection: http://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills