Slider
The Slider widget is used to select a single value from a range of values. You define the min and max value for the slider, and users can choose the value between the specified range by dragging the slider thumb (sliding circle).
For example, you can use the Slider widget to allow users to set the volume, set the donation amount, etc.
Adding Slider
Let's build an example of using the Slider widget and retrieve its value in a Text widget.
The steps to build the example are as follows:
First, add the Slider widget from the Form Elements tab or add it directly from the widget tree.
Now, add the Text widget to display the slider value.
Keep the Text widget selected, Move to the properties panel, and click on the Set from Variable. This will open a new panel.
Set Source to Widget State.
Set the Available Options to Slider. If you add multiple sliders, the names would be like Slider1, Slider2, and so on.
Set the Number Format Option if you wish to.
Click Confirm.
Setting initial value
Sometimes you might want to display the slider with the default value. For example, showing the volume slider with the audible volume value. You can do so by setting the initial value for the Slider.
You can set the initial value in two ways:
1. Setting initial value manually
To manually enter the slider's initial value:
Select the Slider widget from the widget tree or the canvas area.
Move to the properties panel (on the right side of your screen) and scroll down to the Slider Properties section.
Find the Initial Value input box and enter the desired value.
2. Setting initial value from a variable
You can also set the value from a variable such as an app state variable, API response variable, Firestore Document, and more. But for the simplification purpose, let's see an example of setting the initial slider value using the app state variable and Firestore document.
To set the value from the app state variable, create a variable with the Integer data type. To do so, find the instruction here.
To set the value from the Firestore document, ensure you can access the Firestore document. To access the single Firestore document, find the instruction here.
A record/document must contain a field with the Integer data type. See the example below:
To set the initial value from the variable:
Select the Slider from the widget tree or the canvas area.
Move to the properties panel (on the right side of your screen) and scroll down to the Slider Properties section.
Find the Initial Value property and click on the Set from Variable. This will open a new panel.
To set the value from the app state variable.
Set the Source to App State.
Set the Available Options to the name of the variable.
To set the value from the Firestore document.
Find the Source dropdown, click on unset and select the [collection] Record (from PageName).
Under the Available Options, click on Unset and select the field that holds the value to set on the Slider widget.
Click Confirm.
Saving slider value to Firestore Document
Let's see an example of saving the slider value inside the Firestore document.
Saving slider value to Firestore document comprises the following steps:
1. Prerequisites
To save the slider value inside the Firestore document, make sure you incorporate all the mentioned prerequisites.
Be familiar with Structuring the Firebase Database.
Complete all steps in the Firebase Setup section for your project.
Create a Collection with the schema that contains a field with an Integer data type.
2. Passing selection into the document field
You can pass the slider value inside the document field by adding the action that creates or updates the document, such as Create Document or Update Document.
Here are the steps in detail:
Select the Widget (e.g., Button) on which you want to add the action.
Select Actions from the Properties panel (the right menu), and click Open. This will open an Action Flow Editor in a new popup window.
Click on the + Add Action.
On the right side, search and select Create Document or Update Document.
If you select Create Document.
Set the Collection to your collection name (e.g., todo).
If you select Update Document, set the document reference to update.
If you have access to the document, set the Source to the actual document and Available Options to reference.
Under the Set Fields section, click on the + Field button.
Click on the Field name until you see the fields that store the slider value.
Set the Value Source to From Variable.
Click on UNSET, then choose Code Expression, as the Slider widget returns a value in the double data type, and we want to store it as an integer. Through a Code Expression, we can easily cast the data type from double to integer.
Click Confirm.
Customization
You can customize the appearance and behavior of the widget using the various properties available under the properties panel.
Setting platform type
You can set the platform type such as Adaptive, Android, or iOS for this widget. Selecting the Adaptive type will display the widget in its native style. That means the widget will show iOS-style rendering when running on iOS devices and Android-style rendering on Android devices. You can also choose only Android or iOS to display widgets in a specific rendering style on all platforms.
To set the platform type:
Select the Slider widget from the widget tree or the canvas area.
Move to the properties panel and open the Platform section.
Set the Platform Type among the Android or Adaptive.
Defining slider range
You can define the slider range by setting the min and max values.
To set the min and max values:
Select the Slider widget from the widget tree or the canvas area.
Move to the properties panel and scroll down to the Slider Properties section.
Find the Min property and enter the value. This will be the start value of the range.
Find the Max property and enter the value. This will be the end value of the range.
Setting step size
By default, you can move and stop the slider thumb at any place on the slider track. To make the slider thumb stop at a specific interval, you can set the step size value.
If the range is not evenly divisible by the step size, the slider thumb will stop at the closest value in the range.
To set the step size:
Select the Slider widget from the widget tree or the canvas area.
Move to the properties panel and scroll down to the Slider Properties section.
Find the Step Size property and enter the value.
Changing width
To change the width of the slider:
Select the Slider widget from the widget tree or the canvas area.
Move to the properties panel and scroll down to the Slider Properties section.
Changing color
To change the slider colors:
Select the Slider widget from the widget tree or the canvas area.
Move to the properties panel and scroll down to the Slider Properties section.
To change the active color, find the Active Color property, click on the box next to the already selected color, select the color, and then click Use Color or click on an already selected color and enter a Hex Code directly. You can also choose the color by clicking the Palette and Simple button.
To change the inactive color, find the Inactive Color property, click on the box next to the already selected color, select the color, and then click Use Color or click on an already selected color and enter a Hex Code directly. You can also choose the color by clicking the Palette and Simple button.
Set color dynamically
See how to set a color from variable to any color property of this widget.
Showing slider value
You can show the slider value while moving the slider thumb on the track. The value appears as a tooltip above the slider thumb.
To show the slider value:
Select the Slider widget from the widget tree or the canvas area.
Move to the properties panel and scroll down to the Slider Properties section.
Find the Show Value property and turn on the toggle.
Trigger action on change
See how to trigger an action when a selection changes on this widget.
Show/Hide widget
Please find the instructions to show/hide the widget here.
Last updated
