Sliders
A slider is a horizontal track that allows users to adjust values within a continuous or discrete spectrum. It consists of two components: the track and the handle. The track represents the range of values, while the handle is the movable element that can be slid along the track.
Sliders are versatile and can be used for various features such as color, brightness, and media controls. They come in two sizes: small and large. The small slider has a thin track and handle, while the large slider has a handle that is the same height as the marker.
Download the Meta Horizon OS UI Set in Figma or Unity to start building with customizable, production-ready components.
Design | Open in Figma. Change themes for specific components or entire pages and customize elements to fit your design system. |
Implementation | Download the Meta Interaction SDK (Unity) to use the Meta horizon OS UI Set. Elements are customizable and support multiple input modalities. |
The Default Slider is the most commonly used variant and comes in both small and large sizes. The large variant can include an icon in the handle to indicate the value being adjusted.
A text slider has a pill-shaped handle that can display a text string or icon to indicate the value being adjusted or reflect the current value of the slider.
Discrete sliders allow users to adjust values to specific anchored points along the track. Dots are used to indicate potential anchored values to the user.