Skip to main content

Number Slider

Use the Number Slider when you want to allow the user to select a numerical value from a set range of possible data. For example, it may be used to set a variable for some calculation while only allowing values within a reasonable range.

Number Slider

Properties

Properties allow you to edit the Number Slider widget, connect it with other widgets and customize the user actions.

PropertyTypeDescriptionCode Snippet
Min ValueFormattingThe starting/smallest possible value of the slider. The value may be negative and/or include decimals, however it must always be less than the Max Value. (number)
Max ValueFormattingThe ending/largest possible value of the slider. The value may be negative and/or include decimals, however it must always be greater than the Min Value. (number)
Step SizeFormattingThe increment by which the user can adjust the slider's value. This increment must be at least 0.1, and can't be greater than the Max Value. (number)
Default ValueFormattingSets an initial number to be captured as user input unless it's changed by the user. This value should be between the slider's Min Value and Max Value. (number)
MarksFormattingAn array of objects with keys value and label which define where reference labels should appear below the widget's slider. These labels can be shown or hidden with the Show Marks property toggle. (bool)
Show MarksFormattingToggles on/off the widget's reference labels below the slider element. (bool)
VisibleFormattingControls widget's visibility on the page. When turned off: The widget won't be visible when the app is published. It appears translucent when in Edit mode. (bool)
DisabledFormattingMakes the widget un-clickable or unusable. The widget remains visible to the user, but user interaction won't be allowed. (bool)
Animate LoadingFormattingWhen turned off, the widget loads without any skeletal animation. You can use a toggle switch to turn it on/off. You can also turn it off/on using JavaScript by enabling the JS label next to it. (bool)
Tooltip Always OnFormattingHovering over the slider with the mouse cursor shows the slider's selected value in a tooltip; enabling this setting forces the tooltip to always be visible, regardless of the cursor's location. (bool)
valueBindingRepresents the value which is currently selected in the widget. (number){{<widget-name>.value}}

These properties allow you to perform formatting changes or bind it to any other widget in queries or JS objects.

Min Value / Max Value

These properties represent the lower and upper bounds of values that can be selected with the slider. The Min Value determines the value at the far left end of the widget, and the Max Value determines the value at the far right end. Negative and or decimal values are allowed however, the Min Value must always be less than the Max Value.

Min Value/Max Value

Step Size

The Step Size property determines the smallest increment by which the user may adjust the value selected by the slider. Smaller values for this property (can't be smaller than 0.1) result in finer control of the selection, whereas larger step sizes result in coarser control.

Step Size

Default Value

Sets an initial number to be captured as user input unless it's changed by the user.

Default Value

Marks

Marks appear along the bottom of the widget as labels for the different values along the slider. Using the Marks property, which is an array of objects with keys label and value, you can define where these marks appear and how they're labeled. Each mark appears below the place where its value is located on the slider, and has the text from its corresponding label.

Marks

Show Marks

This property is a toggle that enables/disables the marks along the bottom of the slider.

Show Marks

Tooltip Always On

When this property is enabled, the widget's tooltip is always visible, and shows the currently selected value on the slider. If this setting is turned off, the tooltip is only visible when the user hovers over the slider with their mouse cursor.

Tooltip Always On

Value

This binding property allows you to access the value that has been selected with the slider. For example, if the selected value is 50, then the value property would look like:

{{NumberSlider1.value}}
// 50
Value

Events

Each variant of the Slider widget has events that are called when the user adjusts the widget's values:

EventDescriptionExample
onChangeSets an action to take place when the user changes the slider's value. Can be set from the GUI list of common actions (See a list of supported actions), or you can define a custom JavaScript function to call instead.Fetching a certain page or image from a range based upon user selection.

Numerical sliders can be helpful when you want to add a visual component to a user's selection of a numerical value. This way, values can be selected at-a-glance for estimations; or even for watching incremental changes in a dataset as the slider value gradually increases or decreases.