Slider

The Slider widget lets users select a number within a range by dragging its thumb (the movable handle) along a track. Set Minimum and Maximum to define the range. For example, use a Slider to adjust audio volume from 0 to 100 or choose a donation amount.

Adding a Slider

1. Add a Slider from Form Elements in the Widget Palette or from the Widget Tree.
2. Select the Slider and open Slider Properties. Set Minimum and Maximum, then choose an Initial Value within that range. You can set the initial value from a variable; for example, a volume control can start at the user's saved volume level.
3. Add and select a Text widget to display the Slider's current value.
4. For its text value, choose Set from Variable > Widget State > [Slider widget name]. Select the intended Slider if the page has more than one. Optionally, set the Number Format Option, then click Confirm.

Displaying vs. saving

The Text widget displays the Slider's current value but does not save it. To keep the value, use an action to read it from Widget State and write it to a persisted App State variable or your backend.

Trigger an Action When the Value Changes

Use the On Selected trigger to run an action when the user changes the Slider value. See Form Triggers for setup steps.

Customization

Select the Slider in the Widget Tree or on the canvas. Use the Platform section for Platform Type and Slider Properties for the other settings:

• Platform Type: Choose Android or Adaptive. Adaptive uses an iOS-style slider on iOS and an Android-style slider on Android.
• Minimum: Set the lowest selectable value. For a volume control, use 0.
• Maximum: Set the highest selectable value. For a volume control, use 100.
• Step Size: Limit selection to regular intervals. With a minimum of 0, a maximum of 10, and a step size of 2, users can select 0, 2, 4, 6, 8, or 10.
• Width: Set the Slider's width. Choose infinity to use the available width, or enter a specific width.
• Active Color: Set the color of the track between the minimum value and the thumb.
• Inactive Color: Set the color of the remaining track.
• Show Value: Display the selected value above the thumb while the user drags it.
• Round Value: Round the Slider's value.
• Num Decimal Places: Choose how many decimal places to keep when rounding is on.
• Disable: Prevent users from moving the Slider. Use the field below this setting to bind its disabled state to a value when needed.