Skip to content
Skip design navigation
Etesie Alpha
Loading account
Components · Slider

Slider

Single- or multi-thumb numeric range input.

Anatomy

  • 1 .slider-root Slider layout and state boundary.
  • 2 .slider-label Accessible slider label.
  • 3 .slider-control Interactive track and thumb region.
  • 4 .slider-track Full available range.
  • 5 .slider-range Selected portion of the track.
  • 6 .slider-thumb Draggable current-value handle.
  • 7 .slider-value-text Formatted current value.
  • 8 .slider-marker-group Scale-mark layout container.
  • 9 .slider-marker Optional labeled or unlabeled scale mark.

Variants

  • Continuous
  • Discrete
Default

Compositions

The component in context, beside others. Open the code to see the file verbatim.

Volume control

When to use

Use a slider when choosing an approximate value from a range is faster than entering an exact number.

Interaction states →