Sliders are a powerful tool for displaying options and encouraging exploration. When done well, they can also indicate relationships between different options. But they can also be clunky and slow to manipulate, which can lead to frustration and discourage users from using them.
To make a slider work effectively, it needs to be easy to manipulate and respond quickly to changes. This requires a lot of thought and research.
First, you need to decide what kind of slider to build: continuous or discrete? You should also think about the layout and spacing of the track, thumb and value labels.
Horizontal slides are good for moving between fixed points, while circular sliders are better for repeating or indefinite values. For example, an animation app might offer a circular slider to adjust the rate at which it spins.
It’s important to choose a style that matches people’s expectations and makes sense for the context of your application. It’s especially crucial for mobile, where users expect a smooth transition from one point to another.
Use familiar slider directions to make it easy for people to understand where they are in the slider. If your application has a horizontal slider that moves between percentages, for example, the leading and trailing sides should be consistently set to the minimum and maximum values.
Adding tick marks on the slider rail can help users snap to them and change the values they’re adjusting. This is especially helpful for single sliders that display just a few distinct predefined values (for example, Postbank’s property financing slider).
Labels on tick marks can provide even greater clarity and reduce confusion. You can either add a label to each tick mark, or you can put periodic labels along the slider rail.
Position the Tick Marks Below the Track and Place the Value Labels Above the Track
Regardless of which style you decide on, it’s important to make sure that your slider is responsive enough to be effective. You want to avoid having to reposition the track if the user’s finger is moving too slowly or dragging too fast.
You should also make sure that the space between the track and the thumb is large enough, so that users don’t have to struggle to tap the thumb or the track when they want to jump to a new point on the slider. Adding padding for both the track and the thumb can also help with this.
It’s also a good idea to give the user the option of changing the size of the thumb or track. If a user is able to do this, they’ll be able to explore the full range of options available on the track.
Finally, it’s important to remember that sliders should never freeze — a lag between the input and the display of the results is very annoying. This can be caused by a number of things, including a delay in getting the data and a failure to repaint the slider when it has changed.
