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.
Properties allow you to edit the Number Slider widget, connect it with other widgets and customize the user actions.
|Min Value||Formatting||The 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 Value||Formatting||The 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 Size||Formatting||The 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 Value||Formatting||Sets 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)|
|Marks||Formatting||An array of objects with keys |
|Show Marks||Formatting||Toggles on/off the widget's reference labels below the slider element. (bool)|
|Visible||Formatting||Controls 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)|
|Disabled||Formatting||Makes the widget inactive or unusable. The widget remains visible to the user, but user interaction won't be allowed. (bool)|
|Tooltip Always On||Formatting||Hovering 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)|
|value||Binding||Represents the value which is currently selected in the widget. (number)|
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.
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.
Sets an initial number to be captured as user input unless it's changed by the user.
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
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
This property is a toggle that enables/disables the marks along the bottom of the slider.
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.
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:
Each variant of the Slider widget has events that are called when the user adjusts the widget's values:
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.