Slider

COMPONENT GUIDE

Explore behaviors before defining the interface.

Quick guide for designers

Always consider the context of the application, even when the guidance follows a standard pattern. Interaction design documents intent. Behavior must be verified in the implementation.

When to use

Use to adjust a value within a range.

What to draw

Show the track, thumb, limits, current value, and focus. With two thumbs, identify each one.

How it behaves

Dragging changes the value; arrows adjust by smaller steps and Home and End reach the limits.

What to document in Figma

Define minimum, maximum, step size, and whether clicking the track changes the value. Larger keyboard steps are optional.

How to review

Check whether the purpose and states are clear on small and large screens and with zoom. Verify documented behavior in the implementation, including keyboard and screen reader use where applicable.

Full guidance

Interaction Design

Questions to ask when designing interactive components of type Slider.

Important:
Depending on the context in which you build your components, there may be further questions, and some listed here may not be necessary. Assess each case individually.

Designing for "no interaction"

Before interacting, can you perceive the available range and current value?
Is the value's unit visible and understandable, when present?
Are minimum, maximum, and important step values perceptible?

Designing for mouse use (any pointing device)

Is there visual feedback when hovering over or dragging the control?
Does dragging the thumb update the value perceptibly?
Can you select values with enough precision for the task?

Designing for gesture use

Does the thumb have a comfortable touch area?
While dragging, does the current value remain visible and understandable?
Does the interaction work without requiring excessive precision?

Designing for keyboard use (any non-pointing device)

Is there visible focus on the thumb or control?
arrow keys change the value in expected increments?
Home and End move to minimum and maximum when applicable?
Page Up and Page Down change the value in larger increments when applicable?

Designing for screen reader use

Is the slider label announced?
Is the current value announced?
Are minimum and maximum values available semantically?
Is the value's unit announced when needed?

Interaction methods

Possible interaction methods for components of type Slider.

Important:
Only the main methods are listed here. Custom components require further study.

Mouse interaction (any pointing device)

Dragging the thumb changes the value.
Clicking the track may move the thumb when that behavior is intended.
The visible value should follow the change.

Keyboard interaction (any non-pointing device)

arrow keys change the value in smaller steps.
Home and End move to minimum and maximum.
Page Up and Page Down may change the value in larger steps.

Keyboard (or gesture) interaction + screen reader

The component should expose its name, role, and value.
The value should update perceptibly during interaction.
When there are two thumbs, each should have a clear name and limits.

Gherkin

BDD (Behavior-Driven Development) methodology focusing on three pillars: User Stories, Acceptance Criteria, and Gherkin Syntax (Given, When, Then).

Scenario: Given that I am on a page containing a slider

Keyboard navigation

WHEN I use the Tab key to move focus to a slider
The focus I SEE is strongly indicated visually
THEN, when I use arrow keys
I SEE the value change in expected increments
THEN, when I use Home or End
I SEE the value go to minimum or maximum

Desktop screen reader

When I use a screen reader on a computer (NVDA, JAWS, VoiceOver) and move focus to the component
- I HEAR the slider's label.
- I HEAR the current value.
- I HEAR the control's role as a slider or value adjustment.
THEN, when I activate or change the component
I HEAR or perceive that its corresponding state, value, content, or action has been updated.

Mobile screen reader

WHEN I use a screen reader on a phone (TalkBack, VoiceOver) and swipe to focus the component, the following happens:
- I HEAR the slider's label.
- I HEAR the current value.
- I can adjust the value using the screen reader's available gestures.
THEN, when I double-tap or use the appropriate gesture to activate the component
I HEAR or perceive that its corresponding state, value, content, or action has been updated.

Considerations

Considerations for components of type Slider.

Do not use a slider without an alternative when a person needs to enter an exact value.
Provide an accompanying numeric field when precision matters.
Custom sliders require careful testing with mobile screen readers.

References

Additional references for components of type Slider.

Important:
Most references are on the course platform alongside the lessons cited in this material.

Disclaimer:
The links listed here are a curated collection of references where you can find implemented components, rather than recommendations. There is no unified implementation format and no guarantee that these links follow every design pattern. Direct questions to the teams responsible for the linked materials. Before copying a model, remember that all materials are constantly updated and that patterns, particularly proprietary ones, may change.