Input - Range slider

Select a value or range from a predefined scale

Healthy
Show details
Healthy
Published: February 21, 2024
Updated: September 12, 2024

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.
🟢 Range slider / isRange=False, :disabled=False, Value=50

🟢 Range slider / isRange=False, :disabled=False, Value=50

🟢 Range slider / isRange=True, :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

Default

Active/Focus

Active/Focus

Hover

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

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=False, Value=50

🟢 Range slider / isRange=False, :disabled=True, Value=50

🟢 Range slider / isRange=False, :disabled=True, Value=50

Range

Range

Range, disabled

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

 

Slider range example

 

  • 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 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

Storybook

Includes a link to an external code repository

Status

The component has a health status indicated

Healthy