Our range slider provides a clearly structured way to display values or ranges, whether for selecting number ranges, adjusting parameters or for efficient interactions.

Add the Range Slider

In the blocks tab, navigate to Input and drag the range slider block into your heyflow
Set a label to describe the adjustable value
Adjust the General settings ex. g. your Upper limit and Lower limit
Check out the Appearance settings to ex. g. Hide your input
Don't forget to have a look at Format & Decorators to customise your input value
Once you're finished, publish your flow

❗ It’s currently not possible to add 0.5 increments to the range slider, only full numbers are possible for the step size.

❗ For this input block, our Conditional Logic is not available. If you want to use a logic, please use our Picture Choice or Multiple Choice block.

Designing the Range Slider Block

There are multiple ways to adjust the block even more than described above. Just head to the Design tab and start working on the Presets. In some plans, you can dive even deeper into all spheres of design & look. When working on the presets, you can head to the Styles section on top and start editing every little detail of each section.

Edit Options

General

Sensitive: When activated, values will not be saved in our database (see here).
Lower limit: Set the lowest end of the range.
Upper limit: Cap the highest end of the range.
Default value: Dictates the value the slider will be set at on page load.
Step size: Determines the incriminates but which the slider can be adjusted.
Input update delay: Defines the time (in seconds) between entering a value in the input and the slider updated.

Spacing

Width: You can use this to adjust the maximum spread of the block and choose between S, M, L and maximum width.
Top, Bottom, Left and Right: You can use these options to set the distance to all sides. To do this, either use the slider or specify the exact number of pixels.

Appearance

Visibility: Here you can select whether the block is only displayed in the mobile or desktop version or whether it is hidden completely.
Background colour: You can select a colour to be used as the background for the block.
Hide input: When toggled in the appearance menu, the input does not appear in the slider's label.
Hide bottom labels: Hides the minimum and maximum labels.

Format & Decorators

Thousands separator: Sets the character to separate thousands as numbers.
Prefix: Add a prefix to your values such as a dollar sign ($).
Suffix: Add a suffix to your values such as a euro symbol (€).

Input Decorators

Min. prefix: Set the minimal value of the prefix.
Max. prefix: Set the maximal value of the prefix.
Min. suffix: Set the minimal value of the suffix.
Max. suffix: Set the maximal value of the suffix.

Labels & Variables

System label: Specify a system label for the block.
Variable: See Variable.
Use numeric value: Enable a special variable that corresponds to the numeric value of the slider. This is helpful if your slider value has other word characters, e.g. prefixes, but you want to calculate with the numeric value.