Globo Docs
Globo Product Options
Globo Product Options
  • Getting Started
  • Option Set configurations
    • 🛠️ How to Set Up Product Options
  • 🧩 Set Up Option Set Using Templates
  • Apply Option Sets to Products
  • Apply Option Sets to Specific Customers
  • Apply Option Sets to Countries
  • How to Delete an Option Set
  • Import & Export Option Sets
  • Option Elements
    • Set up Required filed
    • Hide Element Label
    • Change the Element Name Displayed in Cart and Checkout
    • Input Type options
      • Text and Textarea
      • Number and Phone field
      • Email Field Element
      • Hidden Field Element
      • File Upload Element
      • Color Picker
      • Switch button element
      • Range Slider
  • Selection Option Type
    • Dropdown and Select
    • Image and Color Dropdown
    • Radio Button and Checkbox
    • Button Element
    • Color Swatch and Image Swatch
    • Font Picker Element
    • Redirect Links Elements
  • Static Option Type
    • Heading element
    • Divider & Spacing
    • Pop Up Modal And Paragraph
    • HTML element
    • Size chart element
    • Tab Element
  • Add-on Feature
    • Advanced Add-on Function
    • Manage Add-On Products
  • How to Manage Option Stock via Add-On Products
  • Translate Option Values to Multiple Languages
  • App Setting
    • General Setting
    • Add-on Price Setting
    • Set Option Set Position On Product page
    • List of themes supporting Ajax Cart function
    • 🎨 Change Option Set’s Background Color
Powered by GitBook
On this page
  1. Option Elements
  2. Input Type options

Range Slider

PreviousSwitch button elementNextSelection Option Type

Last updated 2 months ago

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.