Configure Sliders or Range Sliders

As an application designer or story developer, you can configure sliders or range sliders so that viewers 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

  1. 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 or story with the default name Slider_1 or RangeSlider_1 displayed in Outline. You can change the name there or in the Styling panel.

  2. 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.

  3. (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 viewers 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.
      Note
      The differences among current value, maximum, minimum, end value, and start value should all be divisible by the step value.
  4. (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.
  5. You can use the following APIs to let viewers 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