Skip to main content

How To Configure Range Slider

Slider Input Featured Image

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.

Slider Input Example

Configuration Options​

Slider Configuration Panel

Description & Subdescription​

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

Slider Labels

Limits​

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

Slider Limits

Conditional Render - PRO Feature​

Le'ts you control whether the element 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.Conditional rendering settings

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.

Slider Steps Example
  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.

IMPORTANT

We intentionally do not limit the amount of steps you can display. If your range values are too high, steps will not fit into dedicated space and will start to overlap. This might introduce poor UX and performance of the slider. In such cases it is recommended to hide steps and introduce the value overlay, or adjust the steps gap to reduce the amount of displayed steps.

Display Value Overlay​

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

Slider Value Overlay