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
Edit Options
General
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
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
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
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
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
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.