Skip to content

a JavaScript implementation of HTML5 <input type=range> for Firefox 16 and up

Notifications You must be signed in to change notification settings

html5-ds-book/html5slider

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

56 Commits
 
 
 
 

Repository files navigation

html5slider

a JavaScript implementation of HTML5 <input type=range> for Firefox 16 and up

It transforms all input elements with type range from plain textboxes to sliders on-the-fly automatically, leaving no need for manual function calls.

Try out a live demo!

To use html5slider, simply copy the html5slider.js file to the same directory as your web page and include the following line of code in the web page:

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

html5slider renders the sliders using pure CSS gradients and -moz-element(). Drawing the slider thumb appends only one extra node to the document, and this node is hidden and shared by all the sliders.

It also provides robust implementions of the value, min, max, and step attributes and properties and the onchange event. For keyboard accessibility, the slider can also be manipulated while focused using the arrow keys.

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

About

a JavaScript implementation of HTML5 <input type=range> for Firefox 16 and up

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published