Range Slider

The Range Slider element allows customers to select a numeric value from a defined range by dragging a slider. It’s perfect for input fields where you want customers to choose a value within a set limit, offering a clean, interactive experience.

🔧 Basic Settings:

  • Label / Name: Customize the label displayed above the slider.

  • Required Field: Make it a mandatory field.

  • Add-on Product / Price: Assign an additional cost based on the selected value.

  • Min / Max Value: Set the lowest and highest numbers allowed.

  • Step Value: Define the increments (e.g., 1, 5, 10).

  • Default Value: Choose a value that will be selected by default.

⚙️ Advanced Settings:

  • Prefix & Suffix

  • Help Text & Position: Add guidance or notes to help users understand the function.

  • HTML Class: Apply custom styles via CSS classes.

  • Column Width: Adjust how wide the slider appears within the form layout.

  • Conditional Logic: Show or hide this field based on other selections.

🧠 Use Case Examples:

  • Choose donation amount

  • Select quantity for bulk pricing

  • Adjust print size or dimensions

  • Set customization preferences (e.g., brightness, opacity)

The range slider is both visually appealing and user-friendly, making it a great alternative to text-based number inputs.

Last updated