Overview

Sliders are a form of input control that allow users to select a value or range from a predefined scale. Therefore, sliders should only be used when a clear Min and Max value are defined.

 

Design

Structure

The Input Slider consists of a track, thumb(s), and tooltip(s).

• Track: the base line where values are spread out
• Thumb: drag to represent the selected value or range
• Tooltip: appear above thumbs, display the exact value being selected, enhancing clarity and precision
• Legend: This sits below the track and provides the user with the min and max values of the range.

Variants

• Single Value Slider: Allows selection of a single value.
• Range Slider: Enables marketers to define a value range by providing two thumbs on the track.

 

States

• Default: When the user interacts with the slider, highlighting its usability.
• Disabled: Appears when the slider is not interactive, indicating it's temporarily out of operation.
• Hover: When the cursor is over the thumb, a tooltip will appear showing the active value and will update as the thumb is slid.
• Active/Focus: Shows when the thumb is the target of keyboard navigation or active selection. Arrow keys can be used to move the slider to the left or right. The current value should always be shown while the thumb is in focus and updated as the value changes.

Thumb

 

Slider

Guidelines

Use cases

Ranged sliders can be paired alongside a visual representation, such as a graph, to help illustrate the active selection. When the slider is active or pressed, the value of that point on the range should be visible.

• Setting probability ranges for target contacts in Predictive goals
• Defining engagement or score thresholds for lead qualification

 

 

 

Content

• Sliders should be paired with a label and description to help indicate what the slider controls
• Labels should be concise, yet descriptive, to ensure marketers understand what value or range they are selecting
• Tooltips should dynamically reflect the value being adjusted, providing immediate feedback
• Sliders should be in close proximity with the range or selection that they control

Accessibility

• Keyboard Navigation: Ensure sliders are operable with keyboard shortcuts, such as arrow keys for adjustment.
• Screen Reader Support: Labels, values, and roles should be clearly announced by screen readers, aiding visually impaired users.
• Contrast and Colors: Adhere to WCAG guidelines for color contrast to accommodate users with visual impairments.
• Focus Indicators: Provide visible focus indicators for users navigating via keyboard.

 

Health