Updated over a week ago

Play’s slider element lets you add & customize Apple’s native slider. A slider is a control to adjust a value within a range.

Anatomy of a Slider

There are two parts to a slider element: the thumb and the track. The thumb is the circle that you drag to a position on the slider. The track is the line that the thumb drags along.

The track is broken into two sections by the thumb. Any track to the left of the thumb is the min. Any track to the right of the thumb is the max.

If the slider’s start value equals the min value or the max value, the min or max, respectively, will not be visible until you slide the thumb.

Slider Values

There are four values for a slider that you can adjust in Play: start, step, min, and max.

The Start Value is the slider’s value when it has not yet been interacted with. It will be reflected in the original output text and the position of the slider’s thumb.

The Step Value is the increment between each number in the range.

The Min Value is the bottom of the slider’s range. It will be displayed when the slider is all the way to the left.

The Max Value is the top of the slider’s range. It will be displayed when the slider is all the way to the right.

Round To

Use the Round To attribute to choose the number of decimal places displayed in the output text. You have the option between a whole number, one decimal, or two decimals.


Using the color properties, you can choose the color of the min, max, and thumb from your list of Color styles. You can also add a new color style by tapping the property’s chain icon in iOS/iPadOS or opening the Styles Panel in macOS.

Did this answer your question?