Number slider input

The Number Slider is a control component that allows users to select a value from a range of numeric values by dragging a slider.

Properties settings

Link with

Specify the column where user interaction data will be saved in the data table.

This setting is exclusive to the detail page and ensures seamless integration between the component and the linked data table.

Label & Icon

Provide a descriptive label to indicate the purpose or significance of the Number Slider Input component. You can also choose an icon that visually represents numeric values.

Initial value

Set the default value the slider will be set to when it is first displayed to the user. This can be useful for pre-selecting a value that you think is a good starting point or to make the user interface feel more personalized and relevant to the user.

Limiting value

Determine the range of values that the slider can be set to. For example, if the min value is set to 0 and the max value is set to 100, the user can slide the slider handle anywhere between 0 and 100 to select a value.

Hidden

Choose to hide the slider input component from the user interface or not. This can be useful when the component is only needed for internal data processing or calculations and does not need to be visible to the user.

Disabled

Configure the permission for users to change the numeric value on the page with the number slider.

You may consider whether or not disabling the ability to interact with a component in many cases. For instance, you may showcase information in read-only mode, prevent accidental changes to critical data, or disable the component until users go through several steps.

Tag

Name the component for use with the Typescript.

currentPage.components.componentTag

Interactions settings

You can empower the "Number Stepper input" component and enhance the user experience with it by specifying the component's behavior when a user changes the value on the component.

You can choose one from a wide range of supported actions, such as updating your table or sending a notification on the interaction.

Explore all the available types of actions and find detailed instructions on their configuration here.