HTML5 Form Sliders: The Range Input

Posted on in Uncategorized



Range is an important new form element in HTML5. It eliminates the need for large amounts web development such as JavaScript coding or frameworks when creating form sliders. Now you can easily create native form sliders with just one element.

The range input is best used when you are dealing with a wide range of numbers, there is a set upper and lower limit and the user is going to be adjusting their inputs with frequency. Form sliders using the range input is an ideal alternative to drop-down selections and number inputs. Users will appreciate the ease of use range sliders provide on forms.

For basic HTML5 form sliders, the range input should have the following attributes: min, max and value. The min is the lowest acceptable value, the max is the highest acceptable value and the value is the default or starting value. Adding label elements to your form inputs will increase the usability of range sliders.

Perhaps the best part about HTML5 is that input elements such as form sliders don’t need to be associated to form tags. As a result, you can place range sliders anywhere on your website, not just in forms. Therefore, you can greatly improve your website’s UI with the range input in HTML5.

Compatibility is always a concern when designing websites. Fortunately, the range input is compatible with all modern browsers including all versions of Chrome, Safari and Opera. It is also supported by iOS 5+, IE 10+ and a Firefox 23+. You can make the  range input on HTML5 form sliders work on older browsers, it will just require a bit more work.

In terms of ease of application and improving overall usability, HTML5 form sliders with the range input are a big win for web designers. You can greatly improve the usability of forms and other page elements with range sliders.

However, you do need to be careful to apply range sliders only where they will improve the user experience. It can be tempting to overuse elements when they are new and exciting. Used correctly, range sliders are an important tool for web development.
What areas of your website could benefit from the range input offered by HTML5 form sliders?

Leave a Reply

What our clients are saying

I want to thank you for your help with our website development project. Your programming skills, attention to detail, and ability to interact directly with our client were excellent. You have provided tremendous value to my organization. With a project of this magnitude, including the use of web services to push data out to 19 sub-websites, your ability to overcome our unique challenges and coordinate with my IT team was exceptional. I appreciate your help, and I am certain that your expertise was key to the project's success. Thanks again, I look forward to working with you on our next endeavor!

~ John Forgione – Executive Vice President – SFA Marketing, Inc.

Read More