Sliders Are Bad Practice

This post is my reaction to seeing more and more numeric or range sliders in web- or mobile design used for the wrong reasons.

A slider is a good choice when you know that users think of the value as a relative quantity, not a numeric value. For example, users think about setting their audio volume to low or medium—not about setting the value to 2 or 5. — Microsoft

I hate saying this, but listen to Mr. Microsoft. Using a slider to select a specific number is horrible, on touch devices even more so. The larger the value range on a slider, the easier it is to select the wrong number. Like Mr. Microsoft says, using it to select a relative quantity is OK. Only people with certain compulsions will want to set the volume to an exact number. Or maybe people who know eighty is the perfect volume on their TV when watching their favorite show on Netflix. When I’m ordering beer at the bar I’m not like “Five to ten beers please”. I want six for me and my buddies and I don’t want it to order like “Five beers, no eight, wait, seven, no six beers please”.
So please, only use sliders when users have direct feedback on the change. Like the changing of the volume or the changing of the brightness.

What should I use then?

When deciding on your input method consider the value that needs to be entered. If you want to restrict the user you could use radio buttons if the restriction is up to four values. For anything more than four values I recommend using select boxes (or custom drop down list for more creative freedom). If you don’t want to restrict your user, just use a input box. HTML5 has a special numeric input type which even gives you the option to set a minimum and maximum value.