EDS – Equinor Design System

A slider is a flexible input that allowss users to adjust predefined values.

Guidelines

Sliders reflect values along a bar where users can select a single value or a range of values. Sliders reflect the current state of the values they control, and value changes are immediate to the content in which they belong.

Labels

Number and abbreviation labels are allowed. They should clearly communicate the values such as: Min., Max, Avg. or a number.

Don’t

  • Do not use a slider without a title indicating what the slider controls.
  • Do not use for ranges that are extremely different, e.g., 1-10000.
  • Do not use for ranges that are very small, e.g., 1-4.

Variations

Dot

On hover, a tooltip can appear to give more guidance.

FigmaExternal linkFigma design of slider dot

Handle

On hover, a tooltip can appear to give more guidance.

FigmaExternal linkFigma design of slider handle

Indicator

The indicator signifies the selected range.

FigmaExternal linkFigma design of slider indicator

Track

FigmaExternal linkFigma design of slider track

✏️ Edit this page on GitHub