Range Control

Slider control with optional input field for visual number selection.

Options

Option	Type	Default	Description
label	string	-	Field label
control	string	range	Control type
default	number	-	Default value
min	number	-	Minimum value
max	number	-	Maximum value
step	number	1	Step increment
showInput	boolean	false	Show numeric input field
marks	array	-	Mark positions

Example

{
  "attributes": {
    "opacity": {
      "type": "number",
      "default": 80,
      "wbs": {
        "label": "Opacity",
        "control": "range",
        "min": 0,
        "max": 100,
        "step": 5,
        "showInput": true
      }
    }
  }
}

Template Usage

<div class="overlay" style="opacity: {{ attributes.opacity / 100 }}">
  {{ inner_blocks|raw }}
</div>

Use Case

Use Range for:

• Percentages (opacity, progress)
• Sizes and scales
• Any value where visual slider selection is more intuitive than typing