justinmind

Slider design: basics and examples

November 17, 2020
guide to slider design

Sliders can be a fun way to lighten the cognitive load of a page. But what makes a good slider? Find out in this post!

Sliders can be a welcome sight to many users out there. There’s something truly dynamic about them, even if they can’t beat a regular input field sometimes. Over the years, users have grown increasingly used to seeing sliders in a certain context, with their popularity soaring.

Design interactive slider controls with Justinmind's prototyping tool
Download Free

But why are they popular? Surely, there’s more to it than a simple slider that users can drag with their finger? Today, let’s take a closer look at a UI design classic that can often be misunderstood.

What is a slider in UI design?

A slider, as a UI component, can truly improve the user experience. The whole concept is easy enough: a slider represents a wide range of options that can be specified by dragging the focus point to the desired option. Officially, designers refer to the body of the slider as the track with the selection point acting as the handle or the knob.

It’s a smart way to allow users to explore many different options simultaneously, making the experience smoother. But how do sliders help at all?

what is slider design in ui

The answer is that a slider is a more visual and interactive way to accomplish a goal. In practice, this means that it takes less cognitive effort for the user to use the slider, as opposed to a simple input field. The same can be said for components like toggle buttons, dropdown menus and so on. The whole point isn’t to have a visually pleasing interface, but to make it easier and more practical.

When should we use sliders in the UI?

Sliders can add true value to the design, that much can’t be denied. But like other more interactive components, there’s a right time and place for them.

Consider a toggle button. Users have certain expectations regarding toggles. For example, it would be very confusing for a user to flip a toggle button, only to then have to save that action by pressing another button. A toggle is a switch. Once a switch is flipped, it’s done. It’s up to designers to respect these expectations that users have, implementing a toggle switch the right way.

The exact same can be said of slider design. The ultimate goal is to help the user complete the task, as fast and as easily as possible. A component like a slider can serve to many ends, going far beyond the simple volume slider control. Let’s take a look at some classic situations in UI design that can be prime opportunities for great slider design.

why UI design uses sliders

When users aren’t sure what they want. It can happen surprisingly often, especially when shopping is involved. This can be true for monetary value, representing how much the user is willing to spend. It can also be true for things like dates or the duration of experiences. User’s aren’t always sure about what they want – ecommerce platforms know this very well. That’s why designers go out of their way in order to help users explore. Sliders can be a handy way to achieve that effect.

To specify the search options the user wants. This can be often found in online stores. Sliders can be a handy way of helping users narrow down their search without getting into the minor details. Consider something like a mortgage down payment or the dimensions of eletrodomestic items. This is about users not being sure of what they want, but also helping them narrow down their search to more relevant items.

example of using sliders for search filtering

Choosing among several options. In this context, some designers use sliders in a way that serves the same function as a radio button. Consider a delivery specification, in which the user has to choose between four options, ranging from super fast all the way to standard. There’s some debate as to whether this is a good use of sliders, because most classic slider design doesn’t allow the user to see the available options right away.

The problem in this example is that users could use more information, details about the delivery plan. What does each option entail? Is there an additional fee for express or super fast delivery?

Visualizing what an exact figure means within a context. Even if users know a more specific figure that they want, showing where their desired option stands in a larger context can have an impact on the user.

For example: a user is looking for a mobile service provider that can offer a 3 gigabyte data plan. Would their decision change if they had a better idea of which data plans the company offers? Perhaps if they saw some details about the data plan that offers 100 gigabytes, their original 3 might seem pale in comparison.

sliders in UI design for visualizing options

A slider can be a powerful way to put certain specific things into perspective. In this sense, the body of the slider itself can offer context, help the user understand where their preferred option stands in relation to the others. The same can be applied to banking platforms that use sliders as a way for users to visualize figures that would otherwise seem complex, like our previous mortgage payment example.

Guidelines for slider design

Give the user as much detail as you can

A slider can be a great way to help users explore new options or understand the option they want better. However, a slider by itself can leave users confused as to its function in the screen. You want users to understand the options on each extreme of the slider, as well as any currently selected option.

It’s clear that a slider design, no matter how clever, can’t offer users too much detail without cluttering the interface. This is particularly true when it comes to mobile sliders. In this sense, designing a good slider can result similar to designing a good form. It’s about using the space to hold labels that add true value and add context to the slider itself.

guidelines for slider design - using labels for context

It’s also advisable to have icons on the extreme sides of the slider, something to indicate to the user that the handle can be moved. The most common choices for this tend to be arrows or a plus and less sign.

Some sliders out there use the handle itself as an icon that suggests it can be moved. This doesn’t represent a problem, but be careful with the icon you place on the handle. It’s important that the icons imply the handle can be moved back and forth, as opposed to a single direction.

Make it interactive, don’t lag

Sliders can be a highly interactive way to explore options and get more information or narrow searches. It is key that the slider responds to the user immediately, as a slider that lags behind can turn out to be a rather frustrating experience. Remember that the whole point of having a slider is to make a selection easier on the user. A slider needs to respond to user action in order to be functional.

Smooth transitions between states

Some slider designs out there don’t place enough importance on the transition between selected states. This may seem like a small detail, but high-quality UX design is often in the little details. A choppy transition from one selected option to the next can make the slider itself feel laggy, creating a problem in the user experience. You want the handle to accompany the movement of the user, with a smooth response.

Dual-point sliders can be a viable option

These types of sliders are usually implemented when helping users filter out options. They can be a clever way to avoid having two separate sliders that refer to the same aspect of the search, combining them in a single relevant slider. All it takes is to have a slider with two movable handles, making it easy for the user to establish an acceptable range of options.

guidelines for dual-point sliders in UI design

An easy example would be the price range of a search, with the slider being able to define both the minimum and maximum prices. It’s true that the same effect can be achieved with other UI components, with websites using things like dropdown menus that also define a price range.

Mobile slider design: what changes?

In truth, all the classic guidelines for web sliders apply to mobile sliders. Much like other aspects of UI design, a mobile design means there are more factors to consider. When discussing mobile slider design, the most crucial factor to bear in mind is the user’s touch.

design factors to consider in mobile sliders

There are two things to consider here: the size of the user’s finger and its effect on the user experience. Ultimately, sliders that are handled with a finger need to allow enough space for the slider handle to move freely.

Another practical effect of mobile slider design is that labels must be placed properly. When users handle the slider in order to complete a task, it’s important their finger doesn’t cover the relevant labels. This means that labels need to go either on the sides or above the slider itself. That way, the user can see everything while they interact with the component.

Examples of slider design done right

1. Blue Nile

Blue Nile is a well-known online diamond retailer. The brand prides itself in helping clients all over the world choose the right stone and create their own ideal jewelry. We love that Blue Nile created a filtering system with dual-point sliders, allowing users to be extremely selective with the search results.

slider example from blue nile with dual-point handles

2. SkyScanner

SkyScanner uses dual-point sliders in order to help users narrow down the acceptable departure and arrival times of the shown options. On top of that, we also find that there’s a single point slider that specifies the amount of acceptable time spent in layovers. Another excellent example of slider use to filter searches!

slider example from skyscanner for search result filtering

3. Tylko

Here, we have another great slider design example. Tylko uses several sliders, not to filter options but to help users visualize the available options. Each slider controls an aspect of the shelf, such as height or width. It works well, because it doesn’t just give users an immediate feel of the available options but also puts the currently selected option into context. We love it!

option visualizing slider example for UI design

4. Lloyd’s

Lloyd’s is another bank that makes a clever use of sliders in order to help users visualize a complex matter. Loans. We all know and fear them, with plenty of us being intimidated by the very idea of a loan. Lloyd’s understood that sliders can help users not just explore the boundaries and implications of a loan, but also visualize what a loan like that would entail.

lloyd's loan calculator - slider example

5. Spotify

Spotify is a massively popular music streaming platform. Their UI design has earned both praise and criticism, but there’s no denying their UX design pushes boundaries. We like their use of a slider, because it doesn’t refer to any filter or volume setting. Spotify uses slider design in order to help users configure the crossfade in the transition between songs. It’s simple, easy to understand and to interact with.

slider example from Spotify settings

UI kits for slider design

Web or mobile wireframing UI kit

These are two UI kits that can cover a lot of ground in any design project. Including UI classics from both web and mobile settings, these UI kits both represent an incredibly versatile tool to have at your disposal. Most design teams will invest a lot of effort into wireframing their ideas before they commit to a high-fidelity prototype, and the web wireframing kit can get the teams there faster.

web and mobile wireframing ui kits for slider design

Both web and mobile wireframing UI kit have sliders that have some pre-built interaction that can both save time and pave the way for more detailed designs.

iOS UI kit

The iOS UI kit aims to help designers prototype just about any type of iOS app. The kit has everything you need to create an app that reflects the classic Apple style, while giving plenty of margin to create something unique. The UI kit includes 3 different types of slider: text size slider, a volume slider and one classic simple slider. All of them include basic interaction to jump-start the design process.

ios ui kit for slider design

Material Design UI Kit

The material design UI kit acts in a similar way to the iOS UI kit. It covers all the classic aspects of Android apps, offering a valuable resource to any design team out there. The UI kit includes a classic Android-style slider that is ready to be incorporated into any design.

material design ui kit for sliders in prototyping

The wrap up

A slider can change the initial impression of an interface and change the effort needed to interact with the design. It makes for a typical UI component that users have grown used to, with most of us knowing exactly how to use it when we see it. But of course, no aspect of UI design is free of its own rules and guidelines.

Luckly, slider design can be both a simple component and an opportunity to add flair to the product. It’s all about spotting the right opportunities to use a slider in the design!

PROTOTYPE · COMMUNICATE · VALIDATE
ALL-IN-ONE PROTOTYPING TOOL FOR WEB AND MOBILE APPS
Rebeca Costa
In-house writer, usability enthusiast and patron of all sleep-deprived designers