Slider

Sliders are used to pick a range of values.

External resources
find_in_page Inspect in Figma
description Try it in Storybook
check_circle_outline

Fully implemented in LOGEX Framework.

Variants

Single and range values

A single value slider has one handle displaying the selected value. A range value slider has two handles – representing minimum and maximum values in the range.

  1. Single value slider
  2. Range value slider

Continuous and discrete sliders

Continuous sliders allow the user to select any value from the range (limited by the specified rounding). Discrete sliders allow users to choose a value from a range, where values are multiplications of a specified step (for example 0, 0.1, 0.2, 0.3…). For discrete sliders, tickmarks are usually displayed.

  1. Continuous slider
  2. Discrete slider

Anatomy

  1. Track (selected)
  2. Handle
  3. Track (not selected)
  4. Tick mark (optional)
  5. Input field (optional)

Behaviour

The value is displayed in a tooltip above when hovering over the handle.

When the two values are close together, the two tooltips merge together.

Something missing? Contact one of the designers.