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

In this article, you'll learn how to update the block's content, its settings and design.

After clicking on a building block, you’ll find the Content section on the right. This is where you add and edit the block’s main elements.

The label of the block allows you to name or describe the slider. You can configure the slider’s range by setting a lower limit as the minimum value and an upper limit as the maximum value. The default value determines the position of the slider when the page first loads.

After clicking on a building block, you’ll find the Settings section on the right. This is where you can customize the block’s options, appearance, and behavior to tailor it perfectly to your flow.

Control key settings for the block, including making values sensitive so they aren’t stored in our database. With the step size, you define the increments by which the slider can be adjusted. The input update delay specifies the time in seconds between entering a value in the input field and the slider reflecting that change. You can also choose to hide the input field entirely or hide the bottom label if you want a cleaner interface.

Control the block’s layout by adjusting its width (S, M, L, or maximum) and setting the block's padding from the top, bottom, left, and right.

Set the block’s visibility to show only on mobile, desktop, or hide it completely. Additionally, you can select a background color for the block.

The thousands separator defines the character used to separate numbers into readable groups, for example using a comma or a dot. You can also add a prefix to your values, such as a dollar sign ($), or a suffix, such as a euro symbol (€), to clearly indicate the currency or unit associated with the number.

In this section, you can define the minimal and maximal values for both prefixes and suffixes. The minimum prefix sets the lowest allowed prefix value, while the maximum prefix defines the highest allowed prefix value. Similarly, the minimum suffix determines the lowest allowed suffix value, and the maximum suffix specifies the highest suffix value permitted.

System Labels define how your data is stored and organized, while Variables let you reference and display that data dynamically throughout your flow. 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.

After clicking on a building block, you’ll find the Design section on the right. You can quickly apply a preset style tailored to that block type. Also, customize colors, fonts, and spacing to match your flow.

When you apply a design to one block type, it automatically updates all blocks of that type across your flow. This keeps your design consistent, clean, and easy to maintain without styling each block manually.

Also see Heyflow's other design options to individualize your flow and building blocks even more: