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.

Variant

Dot

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

FigmaExternal link
🙈Ops! Can't find the image, but you could still try Figma.

Handle

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

FigmaExternal link
🙈Ops! Can't find the image, but you could still try Figma.

Indicator

The indicator signifies the selected range.

FigmaExternal link
🙈Ops! Can't find the image, but you could still try Figma.

Track

FigmaExternal link
🙈Ops! Can't find the image, but you could still try Figma.

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