Number Stepper Component for Screen Flow : Yumi Ibrahimzade

Number Stepper Component for Screen Flow
by: Yumi Ibrahimzade
blow post content copied from  Salesforce Time
click here to view original post


### Summary of Number Stepper Component The **Number Stepper** is a Lightning Web Component (LWC) for Salesforce Flow that allows users to select a numeric value easily. Users can either click the "+" and "-" buttons or directly input a number. This component is customizable, with options for setting minimum and maximum values, step increments, default values, and color choices for the background, number, and icons. It updates dynamically, making it interactive with other components in real-time. #### How to Use the Number Stepper 1. **Installation**: Install the component using the provided links. 2. **Create Flow**: Add the Number Stepper to a screen flow. 3. **Configuration**: The component has seven configuration parameters: - **Background Color (HEX)**: Set the background color (default: grey). - **Icon Color (HEX)**: Set the color for the "+" and "-" icons (default: black). - **Number Color (HEX)**: Set the color for displayed numbers (default: black). - **Maximum Value**: Set the upper limit (default: 100). - **Minimum Value**: Set the lower limit (default: 0). - **Step Value**: Define the increment (default: 1). - **Value**: The final selected value, used as both input and output. #### Examples of Use - Users can enter a quantity to see an automatically updated total price. - The component can be used in a screen flow displaying products, allowing users to set quantities for orders. #### Additional Styling Options While the component has built-in styling options, further customization can be achieved using the **Style Overwrite** component. Sample CSS codes are provided to adjust alignment, borders, and font sizes. #### Installation Links - [Production/Developer Edition Installation](#) - [Sandbox Environment Installation](#) This component enhances user experience by offering a modern and interactive way to select numeric values in Salesforce Flow. ### Relevant Hashtags for SEO #Salesforce #LightningWebComponents #SalesforceFlow #NumberStepper #WebDevelopment #UXDesign #CustomComponents #SalesforceAdmin #LWC #UserExperience

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.

The post Number Stepper Component for Screen Flow appeared first on Salesforce Time.

March 13, 2025 at 10:30PM
Click here for more details...

=============================
The original post is available in Salesforce Time by Yumi Ibrahimzade
this post has been published as it is through automation. Automation script brings all the top bloggers post under a single umbrella.
The purpose of this blog, Follow the top Salesforce bloggers and collect all blogs in a single place through automation.
============================