Skip to main content

Slider

A slider is an interactive element for selecting values or ranges by dragging a handle along a track.

Overview

The purpose of sliders is to provide users with a flexible and intuitive way to adjust and select values within a continuous range. They are commonly used for inputting numeric values, controlling settings, filtering data or performing other interactive actions that require selecting a value within a specified range.

Sliders consist of a draggable handle that users can slide horizontally along a track. The track represents the range of values, and its length or position corresponds to the value or range being selected.

A slider that displays a range.

Resources

Stable
Figma Documentation
Planned
Web Components
Planned
Vue [Fozzie]
N/A
React [Snacks]
N/A
iOS JustUI [UI Kit]
Planned
iOS PIE [SwiftUI]
Planned
Android PIE [Compose & Views]
TBC