HTML5 introduced the new range form element that is perfect for creating sliders with min and max values.
It’s supported in all the modern browsers: all versions of Chrome, Safari and Opera; iOS 5+, IE 10+, Firefox 23 and higher. BUT, although it works on mobile too, it’s not very user friendly and quite tricky to work with as it is.
Whilst I was building the front-end of a mobile app side project of mine, I came across a few styling issues and limitations when working with the HTML5 range input which made me look at alternative methods and fixes. I wanted to make the slider look and feel like my app and have the ability to display related components, such as the sliders current value.
Below you’ll find my working example which uses a little bit of jQuery to animate the slider – the range input is still the element that holds it all together. It currently only works for webkit/chrome browsers.
See the Pen HTML5 Slider with Operators by Ketan Mistry (@ketanmistry) on CodePen.