It is completed in Dec 2021. As a member of the Interact design system team, I created the spec for sliders. This would be the standard behavior for the sliders in Interact products, guidelines for designers, as well as developers.

Background

There were sliders in the component library but no guidelines. Both designers and developers were asking about the detailed behaviors of these sliders, especially those with double knobs. Almost no one knows how they are used in the current products.

Developers had more questions coming when they started the implementation. Can user click/tap the slider itself? In double knob sliders, can one be moved across the other? If yes, how do the corresponding values change? How do we deal with errors when it is used with the input field? How is the unit displayed in the input field? What if the two knobs are super close to each other? etc

Desk research, interview and discussion

I started from desk research while I doubted some points in the articles. So I interviewed some people and discussed the details with other designers.

It was surprising that people rarely clearly realized that double sliders are used for range selection. When they were asked what the double sliders did, they were confused about the two knobs. But most of them claimed that they know how to use them when they see them in the actual UI / real scenarios. As a consequence, we documented a rule that “range” should be directly written / pointed out in the label when a double knob slider is applied.

Slider spec is also surprisingly rich with interesting details. One detail that has been documented is that users should be able to control the slider when they keep pressing down on the whole UI on touch devices. See the demo in the spec.

Because installers and configurators, our main users, use Interact mobile apps in the field to configure the lights. They are usually males with big figures. The places where they are using our app and their characteristics make me feel that those details are crucial to our products. Documenting them is going to not only keep the consistent behavior, look and feel across all Interact products at the component level, but also ensure the usability. The point of view was also validated by a researcher/designer from Interact team, she found that the sliders were hard to be controlled by our users when they were lack of these details.

Summary

All guidelines of the components in the Interact library follow the same structure.

• Types: slider types
• Anatomy: key elements explanation in different types of sliders
• Usage: how the sliders are used in Interact products
• Behavior: how the sliders behave in details

Below is the spec.

Sliders

A slider is a control element that uses a knob or lever, moved usually horizontally to control a value, such as brightness, color temperature in Interact context.

It works best when the precise value does not matter to the users, and they are encouraged to explore the possibilities in the given range.

Types 

There are 2 dimensions to group the sliders, single or double knobs, continuous or discrete value options. As a result, there are 4 types of sliders, single continuous sliders, single discrete sliders, double continuous sliders, and double discrete sliders.

Single continuous sliders

Single continuous sliders is used to choose a single value from a range of sequential values.

It contains one knob and a track. It is the most common and frequently-used one in the Interact context for controlling the brightness of the lights.

Single discrete sliders

Single discrete sliders are used to choose a single value from a fixed set of predefined options. These options are marked on the track.

It contains one knob and a track with tick marks, which indicates the predefined values that users could snap to.

Double continuous sliders

Double continuous sliders, known as dual-point continuous sliders, is used to select the range of the results from sequential values.

It contains two knobs and a track. The two knobs indicate the lower and upper boundaries of the range respectively.

Double discrete sliders

Double discrete sliders, known as dual-point discrete sliders, is used to select the range of the results from a fixed set of predefined options. These options are marked on the track.

It contains two knobs and a track with tick marks. The two knobs indicate the lower and upper boundaries of the predefined value set, which means the minimum and maximum values that users are able to select both come from the given options.

Anatomy 

Single continuous sliders

1. Track: The container of a range of sequential values, the sliding range of the knob. The wider or the denser the range selectable through a slider, the harder it is to select a precise value.
2. Knob/Thumb/Handle/Elevator: The lever of the slider, navigating to the selected value and its position on the track
3. Label/Icons: At least there should be one of them, indicating what the slider is about. There could be different combinations between the icon and the slider, depending on the needs, layout, spacing and whether an input field is provided or not.
4. Value/Descriptive labels (optional): Clearly displaying the selected value to the users. In order to remain visible during use, it must appear beside or above the knob and the thumb of the user, especially in the context of touch hybrid devices.

Single discrete sliders

1. Track: The container of the predefined option set, the container of tick marks, the sliding range of the knob. 
2. Knob/Thumb/Handle/Elevator: The lever of the slider, navigating to the selected value and its position on the track.
3. Label/Icons: At least there should be one of them, indicating what the slider is about.
4. Tick marks/Range label: The indicators for the positions of the predefined values on the track, notating where the selected value is going to snap to. The reference horizontal spacing between critical tick marks would be at least 64 dips for easier positioning.
5. Value/Descriptive labels (optional): Clearly displaying the selected value to the users. In order to remain visible during use, it must appear beside or above the knob and the thumb of the user, especially in the context of touch hybrid devices.

Double continuous sliders

1. Track: The container of a range of sequential values, the sliding range of the knobs. The wider or the denser the range selectable through a slider, the harder it is to select a precise value.
2. Knob/Thumb/Handle/Elevator: The lever of the slider, positioning the minimum and maximum value on the track.
3. Label/Icons: At least there should be a label, saying it’s a range selector and what it is about. There could be different combinations depending on the needs, layout, spacing, how the range is displayed, whether input fields are provided or not, etc.
4. Value/Descriptive labels (optional): Clearly displaying the selected range to the users. In order to remain visible during use, they must appear beside or above the knob and the thumb of the user, especially in the context of touch hybrid devices.

Double discrete sliders

1. Track: The container of the predefined option set, the container of tick marks, the sliding range of the knobs. 
2. Knob/Thumb/Handle/Elevator: The lever of the slider, positioning the minimum and maximum value on the track.
3. Label/Icons: At least there should be a label one of them, saying it’s a range selector and what it is about. There could be different combinations depending on the needs, layout, spacing, how the range is displayed, whether input fields are provided or not, etc.
4. Tick marks/Range label: The indicators for the positions of the predefined values on the track, notating where the values are going to snap to. The reference horizontal spacing between critical tick marks would be at least 64dips for easier positioning.
5. Value/Descriptive labels (optional): Clearly displaying the selected range to the users. In order to remain visible during use, they must appear beside or above the knob and the thumb of the user, especially in the context of touch hybrid devices.

Usage 

It is recommended to use sliders when you would like to encourage more explorations on the values within the range, and the specific value does not matter to the users.

In Interact context, they’re ideal for adjusting settings such as light brightness, color temperature, and other detailed parameters in lights and sensors.

General

Use single sliders to select a value; use double sliders to select a range.

Use continuous sliders to provide all value options; use discrete sliders to provide predefined value options.

Single continuous sliders

They are used when only one value has to be selected. And the options are consecutive. They are the most common and frequently-used sliders.

Single discrete sliders

They are used when only one value has to be selected. The options are limited from a fixed predefined set. Users can only choose a value from the set. The single discrete sliders could be replaced with a set of radio buttons or a dropdown list.

When more information for the tick marks are necessities, we could space out them vertically and add a subtle vertical line indicating a connection between the value and its position on the slider.

It is recommended to position them below the track.

Double continuous sliders

They are used to select a range. And the options for minimum and maximum values are consecutive. Make sure that users can select a range correctly without having to struggle too much to hit a precise value.

It is recommended to use label, not icons, to explicitly explain to the users that they are going to select a range, not a specific value when double sliders are used. Double sliders for range selection are not common knowledge for users in general.

The more vague a user’s idea of what they want, the more likely that desired option would need to be placed in context, ending up in the middle of the selected range. The more confident the user, the more likely that desired option would end up as the lower or upper boundary of the selection. 

It’s also a good idea to provide extra information to help users make decisions.

Double discrete sliders

They are used to select a range. And the options for minimum and maximum values are limited, from a fixed predefined set.

The double discrete sliders could be replaced by a set of predefined range options. Sometimes, it would be more efficient and much easier to understand. Choose double discrete sliders when the flexibility and freedom of using the values are truly important for the users.

Again, it is recommended to use label, not icons, to explicitly explain to the users that they are going to select a range, not a specific value when double sliders are used. Double sliders for range selection are not common knowledge for users in general.

Details for all sliders

Icon as a label

Consider an icon instead of a label to explain what it controls when it is easy to understand the meaning of the icon in the context or there is limited space.

Input field as a supplement

Add input field(s) to the slider as a supplement in the context that users might want to input precise value(s).

If the user has moved a slider’s thumb to a specific position and wants to make a fine adjustment, it’s easy enough to do by removing a few characters from the input rather than retyping it over again. 

Extra alternate UI as a supplement

Choose an alternate UI element when picking an exact value is very important to the users in the product or you would like to increase the efficiency. Checkboxes, radio buttons, drop-down list with a set of predefined options might be more efficient than sliders to the users.

A reset option

Consider a reset option to be able to restore the position on the slider — just in case.

When a group of things is selected, it is good to provide a reset button so that users could easily go back to all the initial settings. The typical scenario would be a modal view for filters where there are many dimensions that could be selected.

Make sure that the track dedicates to the most frequent range.

If a large part of the slider carries the values that user rarely selects, it is not only wasting spaces but also hard for the users to select the value they want. The spacing between the more “promising” values is narrower. Be careful when price-related sliders are introduced.

Caution – Be careful of using discrete sliders that the scale is not linear.

In this case, there are different light brightness levels to be set. Therefore, a group of sliders are introduced and a Reset button on the top right corner for all the parameters.

Values within a slide are always either progress, growing size or increased intensity for the users.

For example, there are 5 predefined values in a slider, user picks the third one, there is a common expectation that the two options preceding the third one (to its left) will be included in that third option. One direction, with related values “growing” from left to right, is more reliable.

Don’t – Use sliders for values that are not “growing”.

Don’t – Use sliders for limited options.

Don’t – Use sliders when there are exclusive values.

Behavior

General

Instant feedback

Changes made with sliders are immediate.

• Everything stays in sync. The cursor’s shape, the hover effects, the position of the knob, the response to clicking and dragging, the change in values, the change of states inside and outside the slider area.
• The slider is repainted with the result change.

Knob dragging

The thumb has to be large enough and the track has to be wide enough to jump to the values. 

As soon as the user has ‘grabbed’ the slider knob, and keeps pressing down, they do not need to keep their finger on the line to scroll left and right. They can use the entire screen to move left and right.

Single continuous sliders

Both dragging the knob and clicking/tapping on the track are supported.

Single discrete sliders

When user drags the knob, the knob always follows the position that user controls. But it is going to snap to the closest tick mark once the drag behavior is released/stopped.

When user clicks/taps on the track, the knob is going to snap to the tick mark closest to where user clicks/taps.

The more critical tick marks you need to display, the more space a slider will need. Because the slider will have to be responsive as well, the spacing between these tick marks has to be large enough to not require too much precision. As a reference for the space between tick marks in general, it should be no less than 64dips most of the time.

Double continuous sliders

Drag the left knob to control the lower boundary and right knob to control the upper boundary.

Don’t – Switch the position of the knobs, which means user could never move the right knob over the left knob, or the other way around.

When user clicks/taps on the track,

• User clicks outside of the specified range, intuitively, we’ll look into extending the ranges, rather than change the scope of the range altogether. If the click happens outside of the left boundary, we’d extend the left boundary. If it happens outside of the right boundary, we’d extend the right boundary. Either way, adding a link to restore the initial state would mitigate confusion and unexpected changes.

• User clicks between the range, the knob closer to where user clicks/taps reacts. If the click is closer to the lower boundary, we could shift the left knob. If the click is closer to the upper boundary, we could shift right knob. 

When user clicks/taps in the middle of the 2 knobs or the two knobs are very close to each other, the right one always gets priority.

Double discrete sliders

Drag the left knob to control the lower boundary and right knob to control the upper boundary. 

Knobs always follow the position that user controls. But they are going to snap to the closest tick mark once the drag behavior is released/stopped.

Don’t – Switch the position of the knobs, which means user could never move the right knob over the left knob, or the other way around.

When user clicks/taps on the track,

• User clicks outside of the specified range, range is extended. If the click happens outside of the left boundary, we’d extend the left boundary. If it happens outside of the right boundary, we’d extend the right boundary.

• User clicks between the range, the knob closer to where user clicks/taps reacts. If the click is closer to the lower boundary, we could shift the left knob and snap it to the closest value option. If the click is closer to the upper boundary, we could shift right knob to the closest value option.

Sliders with input fields

The value in the input field should be synced with the slider.

• When user uses slider (either dragging the knob(s) or clicking the track), the value(s) in the input field(s) changes at the same time. But the input field(s) is in default state.

• After user enters the value in the input field (either clicking enter on keyboard or leaving the input field), the slider position automatically updates to reflect the new value.

When the input field is active, the cursor should jump to the end of the input. Clear button could be omitted when fewer digits are expected, especially in mobile cases where space is limited.

If user enters an invalid value, the current value should be kept after user clicks enter. Value(s) cannot be saved when there is an error. 

As a consequence, 

• letters and special characters should be prevented where it makes sense.
• range that could be input should be shown as help text if it is blurry for the users.

On touch hybrid devices,

• Triggering input field activates the numeric keyboard at the same time in the context that values are numbers.
• Make sure that the input field is visible, just above the keyboard.

Accessibility

• Use left and right arrows to increment or decrement the value on the slider. 
• For continuous sliders, choose a value that will make it comfortable to adjust the filter in granular steps.

• Use left and right arrows to increment or decrement the value on the slider.
• Use tab and shift+tab keys to switch between the knobs.

References

• Slider design: rules of thumb
• Material design: sliders
• Design the perfect slider