Slider

Approved — Ready for dev

A slider indicates to a user that a value is adjustable. The user moves the slider handle along a rail to increase or decrease this value. When interacting with the sliders, the value is reflected back to the user immediately. There are two types of sliders: continuous, range and discrete. There are three sizes: small, medium and large.

Anatomy

Continuous

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

First Value Slot (Optional)
Indicator
Handle
Track
Second Value Slot (Optional)

Range

Range slider allows users to set a minimum and maximum value.

First Value Slot (Optional)
Track
Handle (Min)
Indicator
Handle (Max)
Second Value Slot (Optional)

Discrete

Discrete sliders allow users to choose from a set of predetermined values. This is shown by using tick marks that the user can easily move the handle across the slider to choose their value.

First Value Slot (Optional)
Indicator
Handle
Tick Mark
Track
Second Value Slot (Optional)

Specs

Color

Element	Property	Value
Track	Background color	∆colorPlatformGray100
Indicator	Background color	∆colorBrandedAffordance
Handle	Background color	∆colorBrandedAffordance
Handle	Border color	∆colorPlatformWhite
Tick Mark (Previous)	Background color	∆colorBrandedAffordanceOn
Tick Mark (Next)	Background color	∆colorPlatformGray300

Size

Size of the bar depends on the design but small is the default.

Element	Property	Value
Track and Indicator	Width	Defined by design
Track and Indicator (Small)	Height	4px
Track and Indicator (Medium)	Height	8px
Track and Indicator (Large)	Height	16px
Tick (Small Circle)	Height/Width	4px
Tick (Medium Circle)	Height/Width	6px
Tick (Large Circle)	Height/Width	10px
Handle (Circle)	Height/Width	16px
Handle (Circle)	Border (Outside)	2px

Elevation

No elevation considerations for the slider component.

Spacing

Spacing between the indicator and the handle depends on the user's action as they slide. The space between the ticks is either equally distributed between the beginning and end or it is defined by design if different.

States

A tooltip will show up as the user hovers over the handle and then also as they drag it around the track to indicate the value. The tooltip will go away once the user has let go of the handle and moved their cursor outside of the handle bounds.

Theming

No theming considerations for the slider component.

Placement

All sliders should be placed adjacent to the content they describe.

Behavior

Click and Drag

The slider can be used by clicking the handle and dragging it across the track. Note: The tooltip for the value will show once the handle has moved over and the user’s cursor is hovering over it.

Click Jump

The slider can be used by clicking anywhere on the track and the handle will automatically slide over to that position. Note: The tooltip for the value will show once the handle has moved over and the user’s cursor is hovering over it.

Accessibility

A keyboard user could tab down to the handle and press the left and right arrow keys to move the handle left on the track.

Developer Docs

Vue Developer Docs

Component documentation coming soon!