How to use Range Slider Block in Optiontics

Overview #

The Range block adds an interactive slider to the product page so customers can pick a numeric value within a min-max window — great for quantity selection, length / weight / size pickers, donation amounts, and any addon where the price scales with the chosen number. Each step the customer slides forward adds the configured unit price to the cart.

Requirements #

Make sure WooCommerce and Optiontics are both installed and active, and that you have at least one product ready to atach the addon to.

When to use the Range block #

Use this block whenever a customer’s choice is a number within a range, not a fixed list of options. Common scenarios:

• Length / width / size pickers — e.g. choose a custom cable length in cm.
• Weight pickers — pick coffee bean weight in grams, or fabric in yards.
• Quantity beyond the WC base — e.g. extra portions for catering (“how many extra plates?”).
• Donation amounts — let the customer drag to set the donation between a min and max.
• Service duration — choose how many minutes / hours of a service.
• Tip / gratuity — drag from 0% to a cap.

The Range block is for single numeric values.

Step 1: Add the block #

1. Open the Optiontics dashboard from your WordPress admin sidebar.
2. Open the option set attached to your product (or create a new one with Add Options).
3. Click Add Elements on the canvas.
4. Switch to the Number category in the insertion modal.
5. Drag Range into the form.

The block lands with a default label of “Range Field”. Click it to surface controls in the right sidebar.

Step 2: Set the slider window — Min, Max, Step #

Three numeric inputs control the slider’s behaviour:

Setting	Default	What it controls
Min	1	The lowest value the slider can reach
Max	100	The highest value the slider can reach
Step	4	The increment the thumb snaps to (e.g. step 4 means the value jumps 1 → 5 → 9 → …)
Default Value	100	The starting position when the page loads

Pick the step value that matches your real-world increments — 1 for whole units, 5 for round numbers, 0.1 for fractional values. The price multiplies by the number of steps above the Min the customer picks (see Step 3).

Step 3: Set the pricing #

Use the Price Type control to choose how each unit is priced.

• Fixed — a flat amount added per unit-above-min. With Min = 1 and the unit price = $2, picking 5 adds $8 to the cart (4 steps above min × $2).
• Percentage — This option sets the addon cost as a percentage of the base product price. For example, if a product costs $30 and the addon is set to 50%, it will automatically add $15 to the total price.
• No Cost — the slider’s value is captured but doesn’t affect price (useful for informational selections like preferred size, where you handle the cost elsewhere).

Tip: The Range block prices flat-per-unit-above-min, which is different from the Number block (which prices once regardless of value). Pick Range when the price scales with the value; pick Number when you only need to capture a one-time amount.

Step 4: Add a postfix (optional) #

Toggle Enable Postfix on to append a unit label after the displayed value (e.g. cm, g, min, %).

• Postfix — the text appended to the value.
• The postfix appears next to the value the customer sees while dragging the slider and in the cart row label.
• Leave Postfix off if the value alone is meaningful (e.g. a count).

Examples:

Use case	Postfix
Custom cable length	cm
Coffee weight	g
Tip percentage	%
Service duration	min

Step 5: Common block controls #

Use the standard controls in the right sidebar:

• Hide Title — suppress the field label (the slider still renders).
• Required — block add-to-cart until the customer interacts with the slider (rare — most ranges have a Default Value, so they always have a value).
• Title — the field label customers see.
• Help Text — short instruction shown below the label (e.g. “Drag to set the cable length”).
• Price Position — where the per-unit price chip appears next to the label.

Step 6: Set up conditional logic #

Open the Conditional Logic tab to use the Range block as either a target or a source.

• As a target — show or hide the slider based on another field.
• As a source — date / numeric comparators (Is, Is Not, Greater Than, Less Than, Greater or Equal, Less or Equal). Example: “Show a Rush Job upcharge field if the slider value is greater than 50.”

The Range block is in the same comparator family as the Number block, so the operator list matches.

Step 7: Save and verify on the product page #

Save the option set and visit the product page. The customer sees a range slider with the settings setup along with it