Range Slider//

The Range Slider component allows users to select a range of values by dragging two handles along a track. The Range Slider is ideal for filtering data, setting price ranges, specifying date ranges, and other scenarios where a continuous range selection is needed.

Overview

The Range Slider provides a visual and interactive way for users to define a range. Key features include:

• Dual Handles: Users drag two handles to set the minimum and maximum values of the range.

• Configurable Range: You define the minimum and maximum possible values.

• Step Size: You control the granularity of the selection (e.g., increments of 1, 0.5, 10).

• Visual Customization: Options for hiding min/max values, hiding the track, and displaying a value pin.

• Vertical/Horizontal: Option to display it vertically or horizontally.

• Units: Options to display different units.

Use Cases

• Price Range Filter: In an e-commerce application, allow users to filter products within a specific price range.

• Date Range Selection: Let users select a start and end date for a report or search.

• Quantity Range: Allow users to specify a minimum and maximum quantity.

• Rating Range: Filter items based on a rating range (e.g., show products rated between 3 and 5 stars).

• Any Continuous Range: Any scenario where users must select a range from a continuous set of values.

Setting Up the Range Slider

Basic Properties

These properties control the fundamental data and labeling of the Range Slider component.

• API Name: (Text) A unique identifier for this component instance (e.g., PriceRangeSlider).

• Label: (Text) The text label displayed above or next to the slider. Example: "Price Range:", "Select a Date Range:".

• Field Level Help: (Text, Optional) Help text displayed next to the label, providing additional context or instructions.

• Value: (Collection Variable - Essential) This is the most important property for interacting with the Range Slider. It holds the currently selected range.

  • Data Binding: You must bind this property to a Collection Variable resource of type Number. This variable will store two values:

    • YourVariableName[0]: The minimum value of the selected range.

    • YourVariableName[1]: The maximum value of the selected range.

  • Example: If you create a Collection Variable named priceRange, you would bind the Range Slider's Value property to {!priceRange}. Then, {!priceRange[0]} would hold the minimum selected price, and {!priceRange[1]} would hold the maximum.

• Multiple Values: (Boolean - Checkbox) If enabled, allows you to set multiple range values.

Range and Step

These properties define the allowed range of values and the selection increments.

• Min: (Number) The minimum possible value for the range.

• Max: (Number) The maximum possible value for the range.

• Step: (Number) The increment between selectable values. For example:

  • Min: 0, Max: 100, Step: 1: Users can select any whole number between 0 and 100.

  • Min: 0, Max: 1, Step: 0.1: Users can select values like 0, 0.1, 0.2, 0.3... 0.9, 1.

Appearance and Display

These properties control the visual presentation of the Range Slider.

• Variant: (Text - Select from options) Controls the label's position:

  • standard: Label above the component.

  • label-inline: Label to the left.

  • label-stacked: Label above (may have different styling than standard).

  • label-hidden: Hide the label.

• Size: (Text - Select from options) Controls the overall size of the slider: x-small, small, medium, large, x-large.

• Type: (Text - Select from options) Controls the orientation of the slider.

  • horizontal

  • vertical

• Hide Min/Max Values: (Boolean - Checkbox) If enabled, the minimum and maximum values are not displayed next to the track.

• Hide Track: (Boolean - Checkbox) If enabled, only the handles are visible; the track itself is hidden. This is a less common option.

• Show Pin: (Boolean - Checkbox) If enabled, a small "pin" (popup) appears above each handle, displaying the current value as the user drags. Highly recommended for usability.

• Show Tick Marks: (Boolean - Checkbox) If enabled, tick marks are displayed along the track, visually indicating the selectable values (determined by the Step property).

• Tick Mark Style: (Text - Select from options) If Show Tick Marks in enabled, select the tick mark style.

  • inner-tick

Number Formatting (Units)

These properties let you add unit to your values.

• Unit: (Text) Select if you'd like to add a unit.

  • decimal

  • currency

  • percent

  • seconds

  • minutes

  • hours

  • days

  • weeks

  • months

  • years

• Maximum/Minimum Fraction/Significant/Integer Digits: (Number) If unit is set, you can set the Maximum/Minimum Fraction/Significant/Integer Digits.

Behavior These settings affect the user interaction.

• Disabled: (Boolean - Checkbox) Completely disables the Range Slider (cannot be interacted with).

• Disable Swap: (Boolean- Checkbox) If enabled, prevents to swap handles min and max values.

• Visible: (Boolean) Controls whether the Range Slider component is visible on the page. Bind this to a Boolean Variable or Formula for dynamic visibility.

Example: Filtering a Data Table by Price Range

1. Create a Number Collection Variable resource named priceRange. This variable will hold two values: the minimum and maximum selected prices.

2. Add a Range Slider component.

3. Configure the Range Slider:

   • API Name: PriceRangeSlider

   • Label: "Price Range:"

   • Value: Bind this to {!priceRange}.

   • Min: 0

   • Max: 1000 (or whatever your maximum price is)

   • Step: 10 (or your desired increment)

   • Show Pin: Enable this (recommended).

4. Add a Data Table component.

5. Configure the Data Table's Query:

   • Use an Avonni Query Data Source.

   • Select the object containing your product/price data (e.g., Product2).

   • Add Filters:

     • Filter 1: Price >= {!priceRange[0]}

     • Filter 2: Price <= {!priceRange[1]}

Now, as the user adjusts the Range Slider, the priceRange variable is updated, the Data Table's filters re-evaluate, and the Data Table automatically displays only the products within the selected price range

1. Interactions

The Range Slider supports the On Change interaction. This is triggered whenever the user changes the selected range (by dragging either handle).

• On Change: Use this interaction to:

  • Refresh Data: Update a Data Table or other component to reflect the selected range. This is the primary use case.

  • Set Variable Values: Update Variable resources with the new minimum and maximum values. (Less common, as you usually bind the Value property directly).

  • Execute Flow: Launch a Flow, passing the selected range as input.

Accessing Selected Values (within Interactions):

Within an "On Change" interaction, you can access the selected range values using:

@RangeSliderName.value

(Replace RangeSliderName with the actual API Name of your Range Slider component). Remember that this is a collection with two values:

• @RangeSliderName.value[0]: The minimum value.

• @RangeSliderName.value[1]: The maximum value.

1. Examples

Example 1: Price Range Filter

1. Add a Range Slider component.

2. Set Label to "Price Range:".

3. Set Min to 0.

4. Set Max to 1000.

5. Set Step to 10.

6. Set Show Pin to enabled.

7. Create a collection Variable resource named priceRange (of type Number, with two initial values, e.g., 0 and 100).

8. Bind the Range Slider's Value property to {!priceRange}.

9. Add a data table and set a Query data source.

10. Add a filter that refers to the value of the @RangeSliderName.value[0] and @RangeSliderName.value[1]

11. Add a On Change interaction on the Range Slider, and set the action to Refresh Data Source with the Data Table data source selected.

Now, as the user drags the Range Slider handles, the priceRange variable will be updated, and you could use those values to filter a Data Table.

1. Important Considerations

   • Value Binding: Always bind the Value property to a collection Variable resource with two Number values. This is how you access and store the selected range.

   • Step Size: Choose an appropriate Step size for your data and use case.

   • Min/Max: Set the Min and Max values appropriately for your data.

   • Interactions: Use the "On Change" interaction to make the Range Slider useful by triggering actions based on the selected range.

   • Units: If your data represents specific units (currency, percentages, etc.), consider visually indicating those units in the component's label or using the Unit attribute.

   • Vertical: You can use the range slider vertically.

In Summary: The Range Slider is a visual component to let end-users filter information within a specific range. You can set Min/Max, and also visual settings like if you want to display tick marks