Skip to content
search icon
clear
Component Status

A slider is a flexible input that allows 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

Demo

Slider simple

Simple slider
4
010
Simple slider, no dots, no min or max values, steps of 10
50
50
0100

Slider with range

Range slider
30070100

Output from slider is 30, 70

Range slider with a lot of steps
00500500

Committed output from slider is 0, 500

Range slider with steps of 5
403060100
✏️ Edit this page on GitHub