# 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.

<figure><img src="https://3294420404-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyKpeSoGW2SR7i4BJqoeq%2Fuploads%2FfylmbclBkpUXAiHZkd8K%2Fimage.png?alt=media&#x26;token=549361f5-97b4-46af-b469-ea2340a12048" alt=""><figcaption></figcaption></figure>

**⚙️ 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.