Sliders

Sliders allow users to make selections from a range of values.


Usage

Sliders reflect a range of values along a bar, from which users may select a single value. They are ideal for adjusting settings such as volume, brightness, or applying image filters.

Sliders can have icons on both ends of the bar that reflect a range of values.

Immediate effects

Changes made with sliders are immediate, allowing a user to make slider adjustments until finding their preference. They shouldn’t be paired with settings that have even minor delays in providing user feedback.

Current state

Sliders reflect the current state of the settings they control.

Values

Editable numeric values allow users to set the exact value of a slider. Upon pressing the thumb or the value indicator field, the value indicator...

Read More

Editable numeric values

Editable numeric values allow users to set the exact value of a slider.

Upon pressing the thumb or the value indicator field, the value indicator input becomes editable for text entry. The thumb position immediately is updated to match any change in value.

Order of values

For languages that are displayed from left-to-right, such as English, the smallest value for the range appears on the left and the largest value appears on the right.

For right-to-left languages, like Arabic, this placement would be switched (with the largest value on the left, and the smallest on the right).

A slider with an editable numeric value

Principles

Sliders should be adjustable, immediate, and efficient.

Read More

Adjustable

Sliders should only be used for choosing selections from a range of values.

Immediate

When interacting with a slider, changes should be represented immediately.

Accessible

Sliders should provide the full range of choices available for the user to select from.

Types

Continuous sliders allow users to select a value along a subjective range. Discrete sliders can be adjusted to a specific value by referencing its value...

Read More

Continuous sliders

Continuous sliders allow users to select a value along a subjective range.

Continuous slider

Discrete sliders

Discrete sliders can be adjusted to a specific value by referencing its value indicator.

Possible selections may be organized through the use of tick marks, which a slider thumb will snap to (or to which an input will round up or down).

Discrete slider


Anatomy

A slider can contain the following elements:

1. Track

The track shows the range available for user selection. The smallest value of a range is on the far left, and the largest value on the far right.

2. Thumb

The thumb slides along the track, displaying the selected value through its position.

3. Value label (optional)

A value label displays the currently selected, specific numerical value.

4. Tick mark (optional)

Tick marks represent predetermined values to which the user can move the slider.


Continuous slider

Use continuous sliders allow users to make meaningful selections that don’t require a specific value.

Behavior

This continuous slider is controlled by clicking the thumb and dragging it. This continuous slider is controlled by clicking the track. This continuous slider is...

Read More

Click and drag

This continuous slider is controlled by clicking the thumb and dragging it.

Click jump

This continuous slider is controlled by clicking the track.

Click and arrow

This continuous slider is controlled by clicking the thumb, then using arrow keys to move it.

Tab and arrow

This continuous slider is controlled by using the tab key to select the thumb of the desired slider, then using arrow keys to move it.

States

Continuous sliders have normal, focused, click, and disabled states. Slider states

Read More

Continuous sliders have normal, focused, click, and disabled states.

Slider states



Discrete slider

Discrete sliders display a numeric value label upon pressing the thumb, which allows a user to input an exact value.

Behavior

This discrete slider is controlled by clicking the thumb and dragging it. This discrete slider is controlled by clicking the track. This discrete slider is...

Read More

Click and drag

This discrete slider is controlled by clicking the thumb and dragging it.

Click jump

This discrete slider is controlled by clicking the track.

Click and arrow

This discrete slider is controlled by clicking the thumb, then using arrow keys to move it.

Tab and arrow

This discrete slider is controlled by using the tab key to select the thumb of the desired slider, then arrow keys to move it.

Tick marks (Optional)

Discrete sliders can use evenly spaced tick marks along the slider track, and the thumb will snap to them. Each tick mark should change the setting in increments that are discernible to the user.

Value entry field (Optional)

Value entry fields become editable after selecting the thumb or entry field. After a text entry is made, the slider position automatically updates to reflect the new value.

States

Discrete sliders have normal, focused, click, and disabled states. Discrete slider states

Read More

Discrete sliders have normal, focused, click, and disabled states.

Discrete slider states



Theming

Crane Material Theme

This travel app’s sliders have been customized using Material Theming. One area of customization includes color. Crane is a travel app that uses Material Design...

Read More

This travel app’s sliders have been customized using Material Theming. One area of customization includes color.

Crane’s customized sliders

Color

Crane’s sliders use custom color on three elements: the active track, inactive track, and thumb.

Element

Category

Attribute

Value

Active track, thumb

Secondary

Color

Opacity

#E30425

100%

Inactive track

Secondary

Color

Opacity

#E30425

38%


Spec

Continuous sliders

  • 2
  • 12
  • #6022ee

    R96 G34 B238

  • #6022ee3d

    R96 G34 B238 A0.24

flip
flipSpecs only available at larger screen size

All measurements are displayed in device-independent pixels (dps)

Discrete sliders

  • 12
  • 2
  • 2
  • #6200ee

    R98 G0 B238

  • #6200ee3d

    R98 G0 B238 A0.24

  • Shape

    All corners

    Rounded: 2dp

  • General

    Knotch

    2 x 2 dp

flip
flipSpecs only available at larger screen size

All measurements are displayed in device-independent pixels (dps)

  • 12
  • 12
  • 2
  • #6022ee

    R96 G34 B238

  • #6022ee3d

    R96 G34 B238 A0.24

  • Shape

    All corners

    Rounded: 2dp

flip
flipSpecs only available at larger screen size

All measurements are displayed in device-independent pixels (dps)


Implementation

Sliders implementation support for each platform is indicated below.

Flutter Material Component

Status: Code Available

Web Material Component

Status: Under Development