Skip to content

friedt/html5-input-range

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

31 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

HTML5 input type range

This is a solution when using the html5 input type="range" attribute. The html5 slider can be used as a partial/module in your project. I did some tests on iOS 8+ and android with positive results. It will work on mobile, tablets and desktop. The slider is accessible by keyboard.

  • It consists of a less file, html snippet and plain(vanilla) javascript
  • the number of input elements is flexible, all values will be gathered to do a single post to your backend
  • Minor changes in the css are needed to customize the layout to your needs (form layout).
  • It has a coloured progress(track)
  • This solution will support all modern browsers / IE10+ and has a uniform look
  • The fallback is input type=text, if a working fallback for older browsers is needed it must be added, this will be fixed later

There is a range-slider-object.js added which can be instantiated as a new object

More details about how to use it will follow...