/

The “Slider” element is an input element that allows users to select a single value within a specific range in a visual and interactive way. Thanks to the slider mechanism, users can quickly set the desired value by sliding between the minimum and maximum values.
In this video, we’ll explore an example of using the “Slider” element through the “Set Flight Duration Based on Selected Ticket” scenario. First, create the “GetDurationsDefaults” action from the “Actions” section within the “Data Sources” module.
Click the “UI Design” module, add a “Label” element to your page, and type “Flight Duration” in the “Value” field. In the “Styling” panel, set the font to “Heading 2” in the “Style” field. Add another “Label” element. Drag a “Slider” element below it. Repeat this process. Connect the action you created earlier to your page via the “Initial Action” field. For the first “Label” element, select “FlightType” by following the steps “Action Result,” “GetDurationDefaults,” and “First” in the “Value” field. Click on the “Slider” element, follow the same steps, and define the “DefaultValue.” Then set the “Min,” “Max,” and “Step” fields to “First” as well. For the second “Label” element, select “FlightType” as “Last” in the “Value” field. For the “Slider” element, set the “Max,” “Min,” and “Step” fields to “Last” with the appropriate mappings. To display the flight duration values, set the “TooltipVisible” field to “On” for both Slider elements.
When the application is tested, the outbound and return flight durations for the selected flight ticket will be displayed as default values on two separate sliders under the “Flight Duration” heading. You will see a screen where the durations for the outbound flight to San Francisco (SFO) and the return flight to New York (NYC) are reflected in the slider positions.