Skip to content

Overview

The slider component allows users to input range realted data. A slider consists of a horizontal line upon which sits a small, movable disc (the thumb) and, typically, text that clearly communicates a value that will be set when the user moves it.

Sliders allow users to choose a value from a predetermined range by moving the thumb through the range (lower values to the left, higher values to the right). Their design and use is an important factor in the overall user experience.

Interactive slider demo

Visual demo of how the component works when deployed

Default slider

Slider with starting value