Components

Sliders

Sliders allow users to adjust a setting within a range of values by “sliding” a handle to increase or decrease the setting smoothly or in steps. This guide explains their usage.

Sliders
  • Usage
  • Examples
  • Related component
  • Download

Usage

You can create both horizontal and vertical sliders. You can also set up a tooltip to appear when the slider is being moved, showing the current value on that point on the slider.

Stepwise
Sliders can be set to move in increments (steps) based on a set range of values or when precise adjustment is not necessary.

Stepless
Sliders can be set to be stepless when a lot of options are available or when users need to set a specific value.

Range of values
Sliders that consist of two handles can be used whenever users need to adjust two values to cover a range of values.

Examples

Related component

Download

Sketch UI Library
ZIP
85.97 MB