# 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

4. Create a Number Collection Variable resource named priceRange. This variable will hold two values: the minimum and maximum selected prices.
5. Add a Range Slider component.
6. 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).
7. Add a Data Table component.
8. 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

4. 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.

5. 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.

6. 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