Range Slider: Setting a Price Filter

This example shows a range slider for selecting a price filter. The selected values are automatically available as a component attribute ($Component.apiName.Value), a collection where index 0 is min and 1 is max—eliminating the need for a separate variable binding unless required for advanced scenarios. Set an initial range directly in the Value property if needed (e.g., [50, 250]).

1

Add Slider Component

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

• Label: "Filter by Price Range:"

• Multiple Values: On

• Value: (Optional initial: [50, 250]; no binding needed for basic use)

• Min: 0

• Max: 500

• Step: 10

• Unit: currency

• Show Pin: On

• Disable Swap: On

2

Integrate with Data Table

In the Data Table's query filters, use $Component.priceRangeSlider.Value[0] (min) and $Component.priceRangeSlider.Value[1] (max) to apply the range dynamically

3

Add Interaction

In the Interactions Panel for the Slider, add an "On Change" action to refresh the Data Table's Data Source.

Result: Range selections filter data dynamically.