HTML5 Form Sliders: The Range Input


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?