Stepper

The Stepper component is used to increment or decrement a value using up/down arrow controls. It can be linked to other components, and when the value changes, it updates the associated components accordingly.

The Stepper is useful for scenarios where users need to control parameters, cycle through data values, or adjust numeric thresholds interactively.

Best Situations to Use

Use the Stepper when you want to:

• Provide a controlled numeric input (e.g., set a year, month, or page number).

• Increment or decrement values that update associated charts or filters.

• Allow users to explore what-if scenarios by changing input values.

• Create an interactive navigation control in dashboards.

Not Recommended for:

• Free-form numeric entry (use Input Box instead).

• Scenarios requiring large, unbounded ranges (sliders or dropdowns may be better).

Properties

Background

• Shadow: Enable or disable a shadow effect.

• Shadow Color: Define the shadow hue.

• Shadow Transparency: Adjust the opacity of the shadow.

General

• Component Name: Assign a unique identifier.

• Left / Top: Position the Stepper on the dashboard canvas.

• Height / Width: Define component size.

• Initial Visibility: Toggle whether the Stepper appears on first preview.

• Minimum Value: Define the lower bound of the Stepper.

• Maximum Value: Define the upper bound of the Stepper.

• Step Size: Define the increment/decrement step.

  • Example: Step Size = 5 → values increase/decrease in multiples of 5.

Style

• Background Color: Set the background color of the Stepper.

• Font Color: Define text color for displayed values.

• Font Style: Apply styles such as italic or normal.

• Font Weight: Set text thickness (e.g., normal, bold, 300/600/900).

• Font Family: Choose a consistent typeface.

Example Configurations

1. Year Selector Stepper

   • Minimum = 2010, Maximum = 2030, Step Size = 1.

   • Used to update charts based on the selected year.

2. Pagination Stepper

   • Minimum = 1, Maximum = 20, Step Size = 1.

   • Navigates through data pages dynamically.

3. Scenario Analysis Stepper

   • Minimum = 0, Maximum = 100, Step Size = 10.

   • Adjusts KPI thresholds in associated visualizations.

Notes

• Choose an appropriate Step Size — large steps speed up navigation but reduce precision.

• Use Stepper with associated charts/filters to enhance interactivity.

• Ensure min and max values align with the dataset to avoid invalid selections.