Range Slider
The Avonni Slider component lets users select a single numeric value or a range by dragging one or two handles along a track. Use it wherever a visual scale is more intuitive than typing a number — price filters, quantity inputs, rating scales, percentage settings, and more.
Overview
The component ships as two presets:
Slider — a single handle that selects one value. Ideal for choosing a budget, a discount percentage, a quantity, or any single numeric input.
Range Slider — dual handles that define a minimum and maximum value. Perfect for filtering by price range, date range, rating range, or any scenario where the user must bound a continuous interval.
Both presets share the same underlying component and builder panel. The Multiple Values setting switches between the two modes.
Key features:
Single or range mode: Toggle Multiple Values to switch between one handle and two.
Horizontal or vertical orientation: Rotate the track to suit your layout.
Flexible size: Five size options from X-Small to Responsive.
Pin, tick marks, and track visibility: Show a value popup on drag, display step marks along the track, or hide the track entirely.
Unit formatting: Display values as currency, decimal, percent, or with fully custom labels.
Range guard: Optionally prevent the two handles from crossing each other or enforce a minimum gap between them.
Use Cases
Price range filter: Allow users to narrow a product list by setting a minimum and maximum price.
Single value input: Capture a discount percentage, a quantity, or a rating on a custom scale.
Data table filter: Drive a query-based data table by binding the slider value(s) to filter conditions.
Completion level: Visually set a percentage target or progress threshold.
Configuration
To configure the Slider, select it on the canvas. The Edit Slider panel opens on the right with three tabs: Properties, Interactions, and Style. The sections below mirror the Properties tab.
Properties
Label
The text label displayed above the slider to describe what the user is selecting. Set Variant to Label Hidden if you prefer to suppress it.
Type
Controls the orientation of the slider track. Choose Horizontal (default) for a standard left-to-right track, or Vertical for a bottom-to-top layout. Vertical mode is useful when placing the slider in a narrow column or alongside other vertical content.
Variant
Changes how the label is displayed relative to the slider:
Standard (default) — label appears above the track.
Label Hidden — the label is hidden from view (still read by screen readers via Alternative Text).
Size
Controls the overall length of the slider track:
X-Small, Small, Medium, Large — fixed widths.
Responsive (default) — expands to fill the available container width.
Multiple Values
When off (default), the slider shows a single handle and the Value field accepts a number. When on, the slider shows two handles and the Value field accepts a collection of two numbers (index 0 = minimum, index 1 = maximum). This is the setting that switches between the Slider and Range Slider presets.
Value
The current selected value, bound to a flow resource:
Single mode (Multiple Values off): bind to a Number variable. Requires: Multiple Values = off.
Range mode (Multiple Values on): bind to a Number Collection variable containing two entries. Requires: Multiple Values = on.
Step
The increment between selectable positions on the track. Default is 1. For example, a Min of 0, Max of 100, and Step of 10 produces eleven selectable positions (0, 10, 20 … 100). Fractional steps (e.g., 0.5) are supported.
Min
The lowest value the slider can reach. Default is 0.
Max
The highest value the slider can reach. Default is 100.
Hide Min/Max Values
When enabled, the numeric labels at the two ends of the track are hidden. Useful for a cleaner appearance when the scale is self-evident. Available in Advanced options.
Hide Track
When enabled, the filled track line is hidden and only the handle(s) remain visible. Available in Advanced options.
Show Pin
When enabled, a pin with the current integer value pops up above the active handle while the user is dragging. Strongly recommended for usability, especially on mobile. Available in Advanced options.
Tip
Enable Show Pin for better feedback, especially on mobile.
Show Tick Marks
When enabled, minor tick marks are rendered along the track at every step interval. Available in Advanced options.
Tick Mark Style
Controls the visual style of the tick marks. Requires Show Tick Marks to be enabled. Available in Advanced options.
Inner Tick (default) — tick lines drawn inside the track.
Tick — tick lines drawn outside the track.
Dot — small circular dots instead of lines.
Disabled
When enabled, the slider is fully disabled — handles cannot be dragged and the component appears dimmed. Available in Advanced options.
Disable Swap (Range Slider only)
When enabled, the two handles cannot cross each other, so the minimum handle stays to the left of the maximum handle. Applies in range mode (when multiple values are selected). Available in Advanced options.
Minimum Distance (Range Slider only)
Sets the minimum gap between the two handles when Disable Swap is active. Useful when you need to ensure the selected range always spans at least a certain width. Requires: Disable Swap = on. Available in Advanced options.
Alternative Text
Accessible description of the component, read by screen readers. Available in Advanced options.
Unit Format
The Unit Format section (collapsed by default) controls how selected values are formatted in the display.
Unit
The numeric format to apply to displayed values. Default is Decimal.
Currency — formats values as a monetary amount. Reveals Currency Code and Currency Display As settings.
Decimal (default) — plain numeric formatting.
Percent — appends a percent sign and adjusts the display scale.
Custom — lets you map specific numeric values to text labels (e.g.,
0→ "Low",50→ "Medium",100→ "High"). Reveals the Custom Labels list.
Currency Code
ISO 4217 currency code (for example, USD, CAD, EUR). Requires: Unit = Currency.
Currency Display As
Controls how the currency symbol is shown. Requires: Unit = Currency.
Symbol — displays the currency symbol (e.g.,
$).Code — displays the ISO code (e.g.,
USD).Name — displays the full currency name (e.g.,
US Dollar).
Maximum / Minimum Fraction Digits
The maximum and minimum number of digits after the decimal point. Applies when Unit is Decimal, Percent, or Currency.
Maximum / Minimum Significant Digits
The maximum and minimum number of significant digits. Applies when Unit is Decimal, Percent, or Currency.
Minimum Integer Digits
The minimum number of digits before the decimal point. Applies when Unit is Decimal, Percent, or Currency.
Custom Labels
A list of label–value pairs used when Unit is Custom. Each entry maps a specific numeric slider value to a display label. Requires: Unit = Custom.
Set Component Visibility
All components support conditional visibility — see Component Visibility.
Interactions
Interactions define what happens when users interact with the Slider. Configure them from the Interactions tab of the Edit Slider panel.
Change
Fires when the user releases a handle after adjusting the slider. Use this to refresh a data source, write the selected value into a flow variable, or trigger any flow logic tied to the current position. The value output (single mode) or valueCollection output (range mode) is available within the interaction.
Styling
Configure the Slider's appearance from the Style tab of the Edit Slider panel.
Controls the outer spacing around the component.
Top / Right / Bottom / Left: Adjust the space on each side.
Controls the inner spacing between the component's content and its border.
Top / Right / Bottom / Left: Adjust the inner spacing on each side.
Customizes the border surrounding the component.
Color / Size / Style / Radius: Set the border color, thickness, style, and corner rounding.
Controls the component's dimensions.
Width / Height: Set fixed dimensions.
Min Width / Max Width / Min Height / Max Height: Constrain the size within bounds.
Overflow: Control how content that exceeds the bounds is handled.
Styles the component label.
Color / Font Size / Font Style / Font Weight: Set the label color and typography.
Styles the unit text shown with the value.
Color / Font Size / Font Style / Font Weight: Set the unit color and typography.
Styles the slider track.
Background Color: Set the unfilled track color.
Color: Set the filled portion color.
Height / Radius: Set the track thickness and corner rounding.
Styles the value pin shown above the handle.
Background Color / Radius: Set the pin background and corner rounding.
Styles the draggable handle.
Color / Color Hover: Set the handle color in the default and hover states.
Width / Radius: Set the handle size and corner rounding.
Styles the tick marks along the track.
Color: Set the tick mark color.
Last updated
Was this helpful?