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...