Developer mode
Opens components on the React tab by default.
Your bookmarks

Slider

Also known as Range

Enables selection from a range of values.

When you want to offer users options within a clearly defined range, it can help to give them a more visually pleasing interface. Sliders allow users to move their choice around within a given range.

Using a slider lets you offer the choice of a single value or a range of values. You can even add additional data to the slider to give clear feedback on what falls within a selected range (such as how many flights fall within a price range).

Component status

Figma
Designing
Web (React)
Released
iOS (Swift)
n/a
Android (Kotlin)
n/a
Sketch
Released

Component structure

Label: optionally provides an overview of what is being selected; value description: optionally clearly describes the range users can select from; histogram description: optionally describes what is contained in the selected range in the histogram; histogram: optionally shows what's included in the selection; min value: sets the lowest possible value; max value: sets the highest possible value; handlers: enable users to select their desired value and to improve accessibility it's best to add a label.