> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/dynamic-components/components/range-slider.md). # 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 two tabs: **Properties** and **Interactions**. 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. {% hint style="success" %} **Tip** Enable **Show Pin** for better feedback, especially on mobile. {% endhint %} #### 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. Requires: **Multiple Values** = on. 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](/dynamic-components/core-concepts/component-visibility.md). ## Interactions [Interactions](/dynamic-components/component-builder/interactions.md) 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. --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://docs.avonnicomponents.com/dynamic-components/components/range-slider.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.