Slider (ALPHA)

BusinessEnterprise

Alpha feature: invite only

Responsive Widgets are in alpha and available by invitation only on Business and Enterprise plans. Behavior and properties may change. To request access, open a support ticket and name the feature Responsive Widgets (ALPHA).

The Slider widget lets users drag a thumb along a track to set a value. It has three modes. Number picks one number, Range picks a start and an end number, and Category picks one item from a list, for example a size.

Slider widget

Widget type: WDS_SLIDER_WIDGET

Content properties

These properties appear in the Content tab of the property pane.

Data

Mode string

Sets what the slider captures. You cannot bind this property. Options:

• Number: one number.
• Range: a start and an end number, with two thumbs.
• Category: one item from a list of options.

Default: Number.

Options array<object>

Sets the items the slider picks from. Each option has a label and a value. Values must be unique. Shows only when Mode is Category.

Default value:

[
  { "label": "xs", "value": "xs" },
  { "label": "sm", "value": "sm" },
  { "label": "md", "value": "md" },
  { "label": "lg", "value": "lg" },
  { "label": "xl", "value": "xl" }
]

Min. value number

Sets the lowest value. It must be less than Max. value. Default: 0. Hidden when Mode is Category.

Max. value number

Sets the highest value. It must be greater than Min. value. Default: 100. Hidden when Mode is Category.

Step size number

Sets how much the value changes each time the thumb moves. It must be greater than 0 and no larger than the gap between Min. value and Max. value. Default: 1. Hidden when Mode is Category.

Default value number | string

Sets the starting value. In Number mode, enter a number between Min. value and Max. value. In Category mode, enter one of the option values. Default: 50. Hidden when Mode is Range.

Default start value number

Sets the starting value of the first thumb. It must be at least Min. value and no more than Default end value. Default: 20. Shows only when Mode is Range.

Default end value number

Sets the starting value of the second thumb. It must be no more than Max. value and at least Default start value. Default: 80. Shows only when Mode is Range.

Min. range number

Sets the smallest gap the widget keeps between the two thumbs. It must be 0 or more. Default: 5. Shows only when Mode is Range.

Label

Text string

Sets the label shown above the slider. Default: Value.

General

Show marks boolean

Shows the marks and their labels along the track. Default: on.

Marks array<object>

Sets the reference points on the track. Each mark has a value (number) and a label. Values must be unique. Shows only when Show marks is on and Mode is not Category.

Default value:

[
  { "value": 25, "label": "25%" },
  { "value": 50, "label": "50%" },
  { "value": 75, "label": "75%" }
]

Show value string

Sets when the value bubble above the thumb shows. You cannot bind this property. Options: Always, Hover, Never. Default: Hover.

Visible boolean

Controls whether the widget is visible when the app runs. Default: on.

Disabled boolean

Stops users from moving the slider. Default: off.

Animate loading boolean

Shows a loading animation while the widget's data loads. Default: on.

Reference properties

Reference properties let you read the widget's state in bindings and code, for example {{Slider1.isVisible}}. You cannot set them directly.

isVisible boolean

Shows whether the widget is visible.

Example:

{{Slider1.isVisible}}

value number | string

Holds the current value. In Number mode it is a number. In Category mode it is the selected option's value.

Example:

{{Slider1.value}}

start number

Holds the value of the first thumb in Range mode.

Example:

{{Slider1.start}}

end number

Holds the value of the second thumb in Range mode.

Example:

{{Slider1.end}}

Methods

Methods let you change the widget's properties from code, for example in a JS Object.

setVisibility (param: boolean): Promise

Shows or hides the widget.

Example:

Slider1.setVisibility(true)

setDisabled (param: boolean): Promise

Turns the disabled state on or off.

Example:

Slider1.setDisabled(false)

setValue (param: number): Promise

Sets the value in Number mode.

Example:

Slider1.setValue(75)

setSelectedOption (param: string): Promise

Sets the selected option by its value in Category mode.

Example:

Slider1.setSelectedOption("lg")

setStartValue (param: number): Promise

Sets the first thumb's value in Range mode.

Example:

Slider1.setStartValue(10)

setEndValue (param: number): Promise

Sets the second thumb's value in Range mode.

Example:

Slider1.setEndValue(90)

Events

onChange

Runs when the user releases the thumb after changing the value. It runs once per drag, even in Range mode when both values change.