Number Stepper Component for Screen Flow

Number Stepper is a Lightning Web Component (LWC) designed for use in Salesforce Flow as a screen component. It provides a simple and modern way for users to select a numeric value by clicking + and - buttons or directly entering a number. The component includes customizable parameters such as minimum and maximum values, step increments, default value, and color options for the background, number, and icons. It is fully reactive, meaning its value updates dynamically within the Flow and can interact with other components in real time.

How to Use the Component

1- Install the package using the installation links below.

2- Create a screen flow and add the 'Number Stepper' screen component to a flow screen.

3- This component has 7 configuration parameters.

• Background Color (HEX): Set the background color using HEX format (e.g., '#F3F3F3'). The default value is grey (#D3D3D3).
• Icon Color (HEX): Set the color for both + and - icons using HEX format (e.g., '#FF0000'). The default value is black (#000000).
• Number Color (HEX): Set the color for the displayed number text using HEX format (e.g., '#00FF00'). The default value is black (#000000).
• Maximum Value: Maximum value that the users can choose. The default value is 100.
• Minimum Value: Minimum value that the users can choose. The default value is 0.
• Step Value: It defines how much the value changes when the user clicks the + or - button. The default value is 1.
• Value: This is the final value that users select. It can be used both as an input (to set a default value) and as an output.

Examples

Here is a simple screen where users can enter a quantity and see the calculated total price. Since it is reactive, the total price updates automatically when the quantity changes.

Let’s look at a more realistic use case. This screen flow displays products as cards using the standard repeater component. With the Style Overwrite component, multiple cards can be shown in a single row for a better user experience. The Number Stepper component can be used to set product quantities, enabling the creation of a simple order screen in Flow.

More Styling Options

This component already includes input parameters for setting colors. However, in some cases, you may want to customize its UI further. For example, adjusting its alignment or size. In such situations, you can use the Style Overwrite component to make these changes easily.

Here are some sample CSS codes that you can use.

Align left like the other screen components:

.number-stepper {
display: inline !important;
}

Add border to the number (background color is white in this example):

.number-display {
border: solid !important;
}

Change the font size of the number (background color is white in this example):

.number-display {
font-size: 14px !important;
}

Installation Links

Use this link to install in production or developer edition environments.

Use this link to install in sandbox environments.