All Collections
Building Blocks
Input
Range Slider block
Range Slider block

The slider provides people with the opportunity to quickly choose a numerical value from a predefined range.

Heyflow avatar
Written by Heyflow
Updated over a week ago

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

  1. In the blocks tab, navigate to Input and drag the range slider block into your heyflow

  2. Set a label to describe the adjustable value

  3. Adjust the General settings ex. g. your Upper limit and Lower limit

  4. Check out the Appearance settings to ex. g. Hide your input

  5. Don't forget to have a look at Format & Decorators to customise your input value

  6. Once you're finished, publish your flow

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.

Did this answer your question?