How To Configure Range Slider

What Is Slider Component? #

The slider input allows you to define the range of values user can select from. In this guide I will walk you through the configuration of the slider component.

Configuration Options #

Description & Sub description #

Allows you to add a description and sub description to the slider component.

Limits #

Allows you to define the minimum and maximum values, as well as the step increment for the slider.

Conditional Render – PRO Feature #

Determines whether the slider should be displayed or hidden based on certain condition of other fields. This is typically useful when you want to display field based on another field value. You can define the conditional settings by selecting a field from available list, then you need to select the operation, more, less, equals and finally value. Once you define the condition, then you can choose to either show or hide the current field.

Slider Steps #

Enables configuration of slider step display options. You can choose between different modes for displaying slider steps. The steps are also clickable to allow users to directly jump to desired value.

1. Hide steps – don’t display any steps. This is often useful when your range is high and step value small.
2. Bar steps – display bar steps. Useful when you don’t necessarily need to display numbers.
3. Numeric steps – displays numeric steps.
4. Steps gap – Adjust the gap between displayed steps.

If you set step to 1, and you set a step gap to 4 then you will see every 4th step, but you can still select value in between the gaps. If you want to set step to jump every 4 numbers you need to set step value instead.

Display Value Overlay #

Allows you to toggle the display of a value overlay on the slider.