Range Slider

Range slider is a graphical control element that allows users to adjust a value by moving an indicator, or slider, along a visualized track. It's commonly used in software applications and websites to enable users to select a value from a range by dragging a handle or using arrow buttons to move the slider.

Range sliders may represent various types of data, such as volume control, brightness adjustment, numerical values (like a range from 1 to 10), or any other adjustable parameter within a defined range. They provide a more interactive and intuitive way for users to manipulate settings or select values compared to inputting precise numbers manually.

Component data

Release notes

Global resources:
cicon-package.zip | bootstrap-grid.css (4.4.1) | jquery-3.6.0.min.js

Functional grouping: Text and data

Usage best practices

When to use it:
Sliders are best used in scenarios where you need to indicate a desired setting across a continuum of available increments. Common use cases include:

  • Time: Selecting time increments such as seconds, minutes, hours, or days.
  • Quantity and measurement: Adjusting values like length, weight, height, or degrees.
  • Price: Setting a range for prices
  • Volume: Adjusting sound levels on devices.
  • Severity levels: Indicating a level of severity or intensity on a scale.

When to use other components

  • If users need to input an exact value, use a text input.
  • If the criteria are complex, use select input or multiple selectors.
  • If space is limited, use simpler controls like radio buttons or checkboxes.
  • If you need to communicate the status of progress, use a progress indicator.

Do

  • Ensure the slider is clearly labeled so users know what it controls.
  • Always show the current value or range to users as they adjust the slider. The slider control should change colour to indicate it is active when a user selects it. This provides immediate visual feedback, helping users understand that they are interacting with the slider.
  • Choose default values that make sense for most users. This provides a good starting point and can reduce the need for adjustments.

Don't

  • Do not overcrowd labels. Labels should not overlap, regardless of screen size. Ensure they are concise and mobile-friendly. If space is limited, use concise labels and consider alternative components like input text or dropdown menus.
  • Do not use sliders for precise input; use text input instead.
  • Do not use for non-numeric settings such as selecting a category or choosing a colour.
  • Do not use when only 2 options exist; use toggle switches or radio buttons instead.
  • Do not be too granular. For example, avoid increments like 1001 and 1002 when adjusting the slider.
  • Do not stop between set points on the slider. For example, ensure the slider moves smoothly from 1000 to 1005 without intermediate stops.

Accessibility considerations

Here are key considerations for slider:

  • Keyboard operable: Sliders must be fully operable via the keyboard. Users should be able to move the slider using the arrow keys or other keyboard shortcuts.
  • Screen reader compatibility: Ensure that the slider provides meaningful information to screen readers. This includes announcing the current value, minimum, and maximum values.
  • Visible focus indicators: Provide a clear visual focus indicator for keyboard navigation. This helps users know when the slider is selected and ready to be adjusted.
  • Alternative input methods: Offer alternative methods to input the same value, such as text boxes, to ensure that users who cannot use sliders still have full functionality.
  • High contrast: Use high-contrast colours for the slider and its labels to ensure that users with visual impairments can easily distinguish and interact with it.