Design

Sliders

Updated: Jun 24, 2025

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.

Resources

Download the Meta Horizon OS UI Set in Figma, Unity, or Meta Spatial SDK 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 or explore the Meta Spatial SDK for UI components adapted for spatial experiences. Elements are customizable and support multiple input modalities.

Types

Default

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.

Text

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

Discrete sliders let users adjust values to specific anchored points along the track. Dots are used to indicate potential anchored values to the user.