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 (or knob) 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.
Symbols
You can select a Min Symbol and a Max Symbol for your slider. The Min Symbol will appear to the left of the slider, and the Max Symbol will appear to the right. You can select any symbols and adjust their size, scale, and weight.
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.
Customize
Click on the Customize property to open a popup where you can choose the color of the min, max, knob, and symbols from your list of Color styles.
Slider Output
You can display a slider's output in a text element using interactions. On a slider's Slider Event trigger, set the Event as While Sliding or Value Changed.
Add a Set Text action to the Slider Event trigger. Target a text element, and enter the following expression into the Text property's Expression Editor:
SliderName.value
