Slider

Components

A slider is an interactive control that allows users to select a value from a continuous range by dragging a handle along a track. It often provides intuitive visual feedback as it is interacted with.

Checklist

Documentation

Checklist

Documentation

Checklist

Documentation

Checklist

0 out of

0 out of

5

5

Reset

Style

How the range and the handlers look visually (see documentation for inspiration)

Intervals

Whether the slider intervals has continuous (any value between 0-10000), or stepped (fixed values like a 0-5 rating)

Handles

The elements that users select to drag and change the slider value

Handles should clearly 'break' out from the slider container to be easily identified

Labelling

Text that conveys the spectrum of the slider, or if there are intervals between those ends too

Interaction states

What the handles and slider look like when the user is changing the value