COMPONENTS

Slider

Sliders visualize a range of values and allow for the selection of a single value or a range of values.

slider-intro.png
slider-anatomy.png
  1. Start value label
  2. Minimum value tooltip
  3. Active fill
  4. Maximum value handle
  5. Track
  6. Minimum value handle (dragged state)
  7. End value label

Slider can be either a single point slider for setting a single value or a dual range slider for setting a minimum and maximum value.

slider-variations.png
slider-labels.png

Slider can have three possible states — default, active (dragging) or disabled.

slider-states.png

Sliders can be displayed in large, medium and small sizes.

slider-size.png
  • Where high-precision values are required consider an alternate interface, like a numeric Input.