# Slider ## Overview The Avonni Slider component enables users to select a single numeric value or a range by dragging handles along a track. It's perfect for scenarios where a visual scale is more intuitive than typing numbers, offering a tactile and engaging input method. ### Key features * **Single or Range Mode:** Select one value or define a start/end range. * **Visual Scale:** Displays min, max, and increments for clear guidance. * **Customization:** Adjust orientation, size, tick marks, pins, and units. * **Interactivity:** Drag handles for precise control. ### Use Cases * Select a price point or budget range. * Choose percentages (e.g., discounts or completion levels). * Set quantities or numeric preferences. * Input ratings on custom scales. * Filter data by numeric ranges (e.g., in range mode). ## Configuration Select the Slider component on the canvas to view its properties in the right-hand Properties Panel. ### **Basic Properties** These handle identification and labeling. | Property | Type | Description | Example | | ---------------- | --------------- | --------------------------------------------- | --------------------- | | API Name | Text | Unique identifier for the component instance. | PriceSlider | | Label | Text | Main label displayed to users. | "Select Price:" | | Field Level Help | Text (Optional) | Additional context or instructions. | "Drag to set budget." | ### **Core Functionality & Data Binding** These define selection mode and data capture. | Property | Type/Condition | Description | | --------------- | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------ | | Multiple Values | Boolean (Checkbox) | Off: Single value selection (default). On: Range selection with two handles. | | Value | Variable Binding | Single mode: Bind to Number Variable. Range mode: Bind to Number Collection Variable (index 0 = min, 1 = max). *Tip:* Pre-populate for defaults. | | Min | Number | Minimum value on the track. | | Max | Number | Maximum value on the track. | | Step | Number | Increment between selectable values (e.g., 1 for integers, 0.5 for halves). | | Type | Select | Orientation: horizontal (default) or vertical. | *Best Practice:* Ensure Min < Max and Step fits the scale to avoid usability issues. ### **Appearance & Display** These control the visual style. | Property | Type/Condition | Description | Options/Examples | | ------------------- | ------------------------- | -------------------------------------------------------------------- | ---------------------------------------------------- | | Variant | Select | Label style and position. | standard (above), label-hidden. | | Size | Select | Overall component size. | x-small, small, medium (default), large, responsive. | | Unit | Select/Text | Adds units to values (e.g., currency, percent, or custom like "kg"). | percent, currency, "hours". | | Hide Min/Max Values | Boolean (Checkbox) | Hides min/max labels at track ends. | - | | Hide Track | Boolean (Checkbox) | Makes the track invisible (handles only). | - | | Show Pin | Boolean (Checkbox) | Displays a tooltip with current value during drag. | Recommended for precision. | | Show Tick Marks | Boolean (Checkbox) | Adds ticks along the track based on Step. | - | | Tick Mark Style | Select (If ticks enabled) | Tick appearance. | inner-tick, tick, dot. | {% hint style="success" %} ## Tip Enable Show Pin for better feedback, especially on mobile. {% endhint %} ### **Behavior Properties** These manage interactivity and state. | Property | Type | Description | | ------------ | ------------------------- | -------------------------------------------------------- | | Disabled | Boolean | Disables all interactions. | | Read Only | Boolean | Prevents changes but keeps visible. | | Disable Swap | Boolean (Range mode only) | Prevents min handle from crossing max (maintains order). | | Required | Boolean | Mandates a selection; use with form validation. | | Visible | Boolean | Toggles display; bind to Boolean Variable for dynamics. | ## Examples ### **Single Value Slider: Selecting a Discount Percentage** {% stepper %} {% step %} #### 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 {% endstep %} {% step %} #### 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). {% endstep %} {% endstepper %} Users drag the handle to select a percentage, with the value instantly accessible via the component attribute for calculations or updates. *** ## Key Considerations * **Binding Essentials:** Match Value binding to mode (Number for single, Collection for range) to capture selections properly. * **Scale Logic:** Test Min, Max, and Step for intuitive increments; small Steps on large ranges can feel sluggish. * **Range Mode Nuances:** Use Disable Swap to enforce min ≤ max. * **Unit Formatting:** Configure decimals or locales in related settings for polished display. * **Accessibility:** Enable pins and ticks; ensure keyboard navigation works for all users. *** ## **Troubleshooting Common Issues** * **Handle Overlaps:** In range mode, toggle Disable Swap if swaps occur unintentionally. * **Performance Lags:** For fine Steps (e.g., 0.01), limit the Max-Min range to reduce rendering load. * **Display Errors:** If units don't show, verify org settings for currency/percent formats. *** ## Summary The Avonni Slider component delivers an engaging way to handle numeric inputs or ranges in Salesforce UIs. With robust binding and customization, it's versatile for forms, filters, and more. For integrations, see Avonni Data Table or Variables Guide.