Links

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.
Slider widget

Adding Slider

Let's build an example of using the Slider widget and retrieve its value in a Text widget.
Slider demo
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.
Adding slider widget

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.
Initially selected value
You can set the initial value in two ways:
  1. 1.
    Setting initial value manually
  2. 2.
    Setting initial value from a variable

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.
Setting initial value manually

2. Setting initial value from a variable

You can also set the value from a variable such as the local 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 local state variable and Firestore document.
To set the value from the local state variable, create a variable with the Integer data type. To do so, find the instruction here.
Local state variable
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:
A field in the Firestore document
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 local state variable.
    • Set the Source to Local 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.
Setting initial value from a variable

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
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.
A field in the Firestore document

2. Creating a custom function to convert string to int

The slider widget outputs the value in the String data type, and the field can accept the value of the Integer data type. Hence you need to convert the String value into the Integer by creating a custom function.
You can create a custom function by following the instruction here.
The definition for the custom function looks like the below:
custom function definition
Here is the code (AI-generated) for the custom function:
import 'dart:math' as math;
​
int convertStringToInt(String someString) {
// string to int
int tries;
​
if (someString == null) {
return 0;
}
​
try {
tries = int.parse(someString);
} catch (err) {
return 0;
}
​
return tries;
}

3. 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.
      • Set the Source to Custom Function.
      • Select your Function Name.
      • Now, select the argument name of the custom function and set the Value Source to From Variable.
      • Set Source to Widget State.
      • Set the Available Options to Slider. If you have multiple sliders, the names would be Slider1, Slider2, and so on.
      • Set the Number Format Option if you wish to.
      • Click Confirm.
Passing selection into the document field

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.
Setting platform type

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.
Defining slider 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.
Setting step size

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.
  • Find the Width property and the value. To make the width of the slider the screen's width, click on the infinity icon (
    ).
Changing width

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.
Changing color

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.
Showing slider value

Trigger action on change

Show/Hide widget

Please find the instructions to show/hide the widget here.
Last modified 7mo ago