Slider guidelines

Sliders are numeric inputs that allow users to graphically see their selection relative to the minimum and maximum options.

Slider orientation

Depending on your interface, you may want to use vertical or horizontal sliders.

Horizontal

Horizontal is the most common orientation for sliders. They’re often found in online application forms (e.g., a loan application) and used to refine search results (e.g., setting the max price for a hotel).

Vertical

Vertical sliders are used less often than horizontal ones, mainly because they don’t fit neatly into most forms. You’re more likely to find these kinds of sliders in interactive activities, simulators, or games.

---

Slider control shape

The shape of the slider control may vary depending on what device you’re designing for and your aesthetic preference.

Pointy rectangle

The pointy rectangle is the classic shape and has a nice, sophisticated feel to it.

Line

Due to its thinness, the line shape can be perceived as being more accurate than its larger peers.

Circle

The circle shape, while fairly common, is often associated with Android devices and interfaces using the material design library.

---

Labeling and text

The label on a slider lets the user know how to answer the question and what they have selected.

Question label

The label text should always be easy to read and to the point.

Minimum and maximum

The minimum and maximum should always be visible to the user so that they know what the boundaries are.

Sometimes, you can use icons as your minimum and maximum values, so long as the icons themselves are self-explanatory.

Readout value

A slider should always display a readout value so that the user knows what they have selected. The readout can either be part of the slider component or separate from it, so long as it’s clear what it is.

---

States

Sliders change their state or appearance so that users know what to do.

Normal

When a slider is in the normal state, it can be interacted with.

Disabled

When a slider is disabled, the user can’t change its value. It could be disabled due to a business rule or because the user needs to interact with something else first.

---

Best practices

There are a few best practices when it comes to sliders. Overall, you want to make the already laborious task of filling out forms or searching online as easy and intuitive as possible.

Consider what default you should set

A slider, by its nature, will always have a preselected value. When using one in your interface, consider which value makes the most sense to preselect. As a general rule, when it comes to anything dealing with money, rather default to the lowest option; for everything else, default to the middle.

For range sliders, which allow users to select both an upper and a lower limit, the standard is to have the whole range preselected as the default.

Consider showing the number of results per option

When designing sliders that will show you search results, consider graphically showing the number of results the user will get. An example of this would be to show a user who is setting a price point on holiday accommodation how many homes are available at each price point. Another example would be to graphically show a user who wants to find news articles on a topic from a specific year how many articles on that topic were written each year.

Make it clear if you’re choosing a range or an individual point

Something to consider is if the user is selecting a specific point or a range. For example, if a user is choosing a year, they’re selecting a single point. However, if a user is refining a search by choosing a maximum price, they’re setting the upper limit of a range (i.e., from zero to the price they have selected). Their search results will include any options up to the maximum price, not merely options at that price. One way to indicate that a slider input is a range rather than a point is to change the color of the first part of the slider bar.

Consider adding a text input so users can be more specific

Some users may have difficulty getting the exact number they want on a range slider. To help them out, consider adding an input field as the readout. This means that if they move the slider, the input field’s text will update, and vice versa.

When to use ticks or free-drag

When a slider has ticks or intervals, the thumb doesn't drag smoothly across the slider's range; instead, it snaps to the indicated intervals. These intervals mean that there may be fewer options for the user to choose from. In some cases, this limitation may be helpful. Ticks should be used if there are business rules that only allow specific options, while free-drag is better when you do not want to limit the user's choices in this way.

When to use a slider

While you can also use text inputs or radio buttons to allow users to select a numeric option, the advantage of using sliders is that users can graphically see their options instead of reading them.

When you should use a slider:

• When you want your users to see their minimum and maximum options graphically.
• When you have enough space.
• When dealing with degrees of comparison. This could mean size, money, years, etc.

---

Variations

There are many different variations of sliders. Using more specific input styles makes it more apparent to the user what they’re expected to do.

Controls included in Balsamiq

Balsamiq offers a wide range of pre-made controls. Use the ‘Quick add’ tool to find the one you need, then drop it directly into your wireframe.

Horizontal slider: The horizontal slider is the more common type and is usually found in forms and search-refining facets.

Vertical slider: The vertical slider is less common and more likely to be found in simulations, games, and interactive activities.

Volume slider: A volume slider allows the user to set the volume of audio or video media.

DIY symbols

Make your own Symbols in Balsamiq using other pre-made controls.

Range slider: A range slider allows the user to set a minimum and maximum range. You can create your own range slider symbol by adding an extra circle to the slider.

Slider with ticks: A slider with ticks forces a snapping motion to the slider’s thumb. You can create your own by adding small vertical lines to the bar.

Likert scale: A Likert scale allows users to show how they feel about something in a range. You can create your own by adding circles and some labels to a horizontal line.

---