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