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.

Tip

Enable Show Pin for better feedback, especially on mobile.

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

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.

---

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.