Range slider
Last updated
Last updated
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.
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.
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.
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.
