Skip to main content

Sliders

Sliders allow users to make selections from a range of values.

Specifications

  • Always use with a label, even if that label is hidden.
  • When a label is visible, it should clearly communicate the purpose of the range input and its values (min, max, step, value).
  • Label sliders as optional when input is not required.
  • Validate input as soon as users have finished interacting with a field (but not before).
  • Always use with two text field components when range slider has dual thumbs to provide accessible alternatives to both the lower and upper thumbs.

Sizes

Sliders are available in the following sizes: Small, Medium (Default), and Large.

Sliders Sizes

States

Sliders have the following states: Default, Focus, and Disabled.

Sliders States

Behaviors

  • Adjust a slider’s value(s) by clicking and dragging its handle(s), or by clicking anywhere on its bar.
  • Changes made with sliders are immediate.
Last updated February 27, 2023.