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.
🟢 Range slider / isRange=False, :disabled=False, Value=50
🟢 Range slider / isRange=True, :disabled=False, Value=50
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
Default
Active/Focus
Hover
When the cursor is over the thumb, a tooltip will appear showing the active value and will update as the thumb is slid.
Disabled
Appears when the slider is not interactive, indicating it's temporarily out of operation.
Slider
🟢 Range slider / isRange=False, :disabled=False, Value=50
🟢 Range slider / isRange=False, :disabled=True, Value=50
Range
Range, disabled
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
In almost all cases, sliders should show a tooltip that represents the current value of the slider within the range.
Do
Show a tooltip while the indicator is being dragged to show the current value
Show the tooltip and current at all times value when the slider is disabled
Use for adjusting values within a known range
Provide clear labels and tooltips for precision
Ensure the slider is accessible through keyboard navigation
Don't
Don't modify the colors or styles of the slider or indicators
Don't use a slider when a specific value for the input is expected
Don't use sliders for open-ended values or precise input; opt for input fields instead
Avoid cluttering the UI with too many sliders; use selectively for key parameters
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
Is documented
The component is fully documented
Accessibile
Tested against WCAG 2.1 AAA accessibility guidelines
Tokens
This component uses tokens in both Figma and code
Figma component
Includes a link to a Figma component that has been imported to Supernova