A slider lets users “slide” a handle to choose a number or range of numbers—like setting volume, brightness, or price limits. It gives them a visual way to pick values quickly without typing.
They are used when the user’s choice is a continuous scale or when a range makes sense. Decide if you want fixed stops, like steps of 1 or 5 or a smooth slide.
🧱 Gridding Rules
You can place the Sliders element alone in the row using a flexible grid system.
Max |
60 grids |
⚙️ Settings
The following table outlines the available configuration options for this element. Each setting defines how the element behaves or appears within your app’s UI.
Field | Description |
Label | The main label for form fields like inputs or dropdowns. |
Icon | An icon shown at the start (left side) of the cell. |
Custom Color | controls the color styling of text or divider. |
Cell ID | This is the unique name for the cell. It's used to find or manage the cell later. If both cell_id and callback are provided, the system will use cell_id. |
Callback | This is the action name linked to the cell when a user interacts with it. You must add this when creating the cell. Once the cell is saved, this value can’t be changed. |
Cell Order | This controls where the cell appears inside the row (from left to right). Like callback, it must be set when creating the cell and can’t be changed later. |
Form | The type of the element. You must choose this when creating the cell, and it can't be changed later. |
Style | The visual style of the element (e.g., filled, outlined). You need to set this when creating the cell, and it can't be changed after saving. |
Version | A system-generated version number that updates automatically whenever the cell is changed. |
Prefix | Text that appears at the beginning of an input field (before the user's input). |
Options | A list of choices is shown to the user in dropdowns, radio buttons, or multi-select elements. Only needed for cells that require selection. |
Value | The default or current value for the cell (like a pre-selected option). |
📱 Android & iOS Interface
The Sliders element adapts its appearance and layout behavior based on the platform to align with native UI guidelines:
👇🏻 Action (onClick)
Element | Purpose | Supports Actions | Notes |
Sliders | To allow users to select a single value or range from a defined scale. | ❌ | Used for input only. Does not support linking or triggering actions. Ideal for numeric or range-based selections. |
🃏 Sliders Style Overview
Sliders are UI controls that allow users to select a value—or a range of values—by moving a thumb along a track. They offer a visual and intuitive way to adjust settings, such as volume, brightness, or price ranges, while supporting both continuous and discrete selections.
There are 4 types of them: Continuous, Discrete, Centered, Range selection.
🧰 Usage
- Continuous or discrete
- Continuous: Selects a value from a range with no added restrictions.
- Discrete: Selects a value from a range of predetermined values, marked by stop indicators.
- Centered: Selects a value from a positive and negative value range. The starting value is in the center.
- Range selection: Selects two values on one slider to create a range.
Don’t make the slider range too wide, like 0 to 10,000, if users need precision. Use smaller steps or limits. Also show the numeric value nearby so users know exactly what they picked.
❓ FAQs
Q: How can I add a slider control to let users pick a value (like volume or rating) in my app without coding?
A: You can use the Slider element to create a smooth, interactive control for selecting values. It’s perfect for settings like rating or quantity adjustments—and you can set it up visually in the builder with no coding required.
Q: How do I insert a slider element?
A:
- Open the component library and drag the Slider element into your app layout.
- Place it wherever you want users to adjust a value—for example, on a screen for a feedback form for ratings.
Q: What settings can I customize for the slider?
A:
- Minimum and Maximum Values: Set the range of selectable values (for example, 0–100 for volume).
- Default Position: Choose where the slider starts when the screen loads (like 50 for a mid-point).
- Step Interval: Define how the slider increments values (e.g., steps of 1, 5, or 10 for precise or broad adjustments).