Configure Sliders or Range Sliders
As an application designer you can configure sliders or range sliders so that application users can input and change values dynamically and trigger what-if scenarios based on the value.
Context
The difference between a slider and range slider is that a slider defines a single value while a range slider defines a specific range of data.
Procedure
-
To add a slider or range slider, from the toolbar select and then Slider or Range
Slider.
You can see that the widget is added to your application with the default name Slider_1 or RangeSlider_1 displayed in Outline. You can change the name there or in the Styling panel.
-
In the Builder panel, set minimum and maximum for the slider or range slider. Then:
-
For a slider, enter the default value under Current Value.
-
For a range slider, enter the default start and end values.
These values should be between maximum and minimum.
-
-
(Optional) Furthermore, you can select the following properties:
- Display Min & Max Value Labels to display the minimum and maximum of the slider or range slider.
- Display Current Value Labels to display the selected value of the slider or selected range of a range slider.
- Enable Value Input to let application users directly enter the value instead of sliding the bar.
- Enable Step Selection to increase or decrease the value by a fixed number each step. Then for
Step Size, enter a positive value.NoteThe differences among current value, maximum, minimum, end value, and start value should all be divisible by the step value.
- (Optional) In the Styling panel, you can define the styling properties such as color of the progress bar and background bar (the remaining part other than the progress bar), and scale, scale format and decimal places of all the numbers on the widget.
-
You can use the following APIs to let application users interact with the slider or range slider:
Code Syntax
// Get/set the value of a slider getValue(): number setValue(value: number): void // Get/set the range of a range slider getRange(): Range setRange(range: Range): void // Get/set the minimum value of a slider/range slider getMinValue(): number setMinValue(value: number): void // Get/set the maximum value of a slider/range slider getMaxValue(): number setMaxValue(value: number): void // Get/set the visibility of a slider/range slider setVisible(value: boolean): void isVisible(): boolean // Event - It's triggered when an end user finishes the interaction and releases the handler of the slider bar onChange() //Allow end users to trigger the creation of a range slider with a predefined start and end value. Range.create(start: number, end: number): Range