The Range field creates a simple, interactive control for picking values between a minimum and maximum.

Screenshots

Range Validation Settings

• Required: Toggle to make the field mandatory (default: on).
• Max: Set the maximum character limit (e.g., 100).
• Min: Set the minimum character limit (optional, default: unset).
• Step: Define the increment step for the range (e.g., 1).

Conditional Logic Settings

• Enable: Toggle to activate conditional logic for the field (default: off).
• Show this field if: Builds rules to control field visibility.

• Rule Structure: Select a field (e.g., “Number”) → Choose operator (e.g., “Value is not equal to”) → Specify value or field name (e.g., “Name”).
• Logic Operators: Combine rules with “And” (within group) or “OR” (between groups).
• Add Rule Group: Button to create additional rule groups for complex conditions.

Screenshots

Template usage

The Range field stores an integer and is usually tied to an <input type="range">.

Display as text

<p>
    Progress: <?php echo esc_html( ecm_get_field('my_range') ); ?>%
</p>

Use in CSS

<?php $opacity = ecm_get_field('my_range'); ?>
<?php if ($opacity): ?>
    <style>
        .overlay {
            opacity: <?php echo esc_html($opacity / 100); ?>;
        }
    </style>
<?php endif; ?>