Sliders
Updated: Dec 18, 2024
A slider is a horizontal track that allows users to adjust values within a continuous or discrete spectrum. The slider has two parts: the track and the handle. The track shows the range of values, and the handle is the part you move along the track.
You can use sliders for various features like color, brightness, and media controls. Sliders come in two sizes: small and large. The small slider has a thin track and handle. The large slider has a handle 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. It comes in small and large sizes, and the large size can have an icon in the handle to show the value being adjusted.
A text slider has a pill-shaped handle that displays a text string or icon to show the value being adjusted or the current value of the slider.
Discrete sliders let users adjust values to specific anchored points along the track. Dots are used to indicate potential anchored values to the user.