# Range slider
The Range Slider is a customizable input element that allows customers to choose a numeric value by sliding a handle along a visual track. It’s perfect for scenarios where you want to let customers pick a quantity, dimension, power level, donation amount, or any other measurable input — all in a more engaging and user-friendly way.
👉You can check out our [Demo prouduct](https://avis-demo.avisplus.io/products/range-slider) to see how it works
## **Basic** Option Settings:
**1. Option Name**
This is the internal label used to identify the Range slider option within the app’s settings. It helps you manage and organize the option but does not appear on the storefront product page.
**2. Label on Product**
This is the text displayed above the Range slider input field on the product page of your storefront. It provides customers with instructions or context for what they should enter.
**3. Label on Cart**
This is the text that appears on the Cart summary screen, Checkout, and Order detail page, alongside the customer’s numerical input. It helps identify and display the specific value entered by the customer.
#### **4. Add-on Product**
When enabled, this setting adds an additional charge to the product if the switch is turned on. It’s useful for optional features or upgrades that come at an extra cost.
**5. Step Interval**
Define how much the value increases or decreases when the slider moves. For example, setting a step of “5” means values will jump by 5 units at each movement.
**6. Unit**
Display a unit next to the selected value (e.g., cm, kg, $, %), helping customers clearly understand what the number represents.
**7. Start Value**
The minimum value the customer can select.
**8. End Value**
The maximum value available for selection.
**9. Price Type**
* *Price for each quantity*: the entered quantity is multiplied by the add-on price.
* *Price for any quantity*: the add-on price is still the same no matter how many units are entered.
**10. Conditional Logic**
This feature enables you to set rules for when the Range slider should be shown or hidden based on other customer selections.
## **Advanced** Option Settings:
**1. Hide Selected Value**
Choose to hide the number value above the slider if you prefer a cleaner look.
**2. Show Step Marker**
When enabled, small markers will appear along the slider to indicate each step interval. This provides a clear visual cue and helps customers understand the range more intuitively.
**3. Price display type**
Decide whether to **show or hide** the additional price on the slider interface.
**4. Show price**
Customize how pricing is displayed with these options:
* *Only Option Value:* Show price next to the option value.
* *Only Option Label:* Show price next to the label.
* *Show All:* Display prices with both label and value for maximum transparency.
**5. Default value**
Predefine the value that appears when the product page loads. This gives customers a suggested starting point and can help guide their selection.
**6. Class name**
Allows you to assign a custom CSS class to the Range slider field. This helps apply specific styles or behaviors to the field based on your design preferences.
**7. Help text**
This setting displays directly beneath the Range slider option, offering more detailed explanations or instructions. It remains visible as users interact with the form, providing ongoing support and clarity.
**8. Tooltip**
This setting allows you to provide additional information in a pop-up message when the customer hovers over the information icon. It provides brief, contextual information without cluttering the interface.
---
# Agent Instructions: 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:
```
GET https://options-docs-v2.avisplus.io/option-types/all-option-types/range-slider.md?ask=
```
The question should be specific, self-contained, and written in natural language.
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.