Single Value Slider: Selecting a Discount Percentage

This example demonstrates a basic single-value slider for choosing a discount percentage. The selected value is automatically available as a component attribute, allowing direct access for calculations without needing a separate variable

1

Add Slider Component

• API Name: discountSlider (used for referencing the Value attribute later)

• Label: "Discount Percentage:"

• Multiple Values: Off

• Min: 0

• Max: 100

• Step: 5

• Unit: percent

• Show Pin: On

2

Use the Value

In a Formula resource (or elsewhere, like interactions), calculate the discounted price using $Component.discountSlider.Value (this directly accesses the slider's selected value).

Users drag the handle to select a percentage, with the value instantly accessible via the component attribute for calculations or updates.