Skip to content
Controls

Range

Range control provides a slider for selecting numeric values within a defined range. Perfect for settings like opacity, columns count, or padding.

Range Control

Control Settings

  • Minimum Value - Set the lowest allowed number
  • Maximum Value - Set the highest allowed number
  • Step Size - Define increment/decrement step (default: 1)

Usage

PHP
<div style="opacity: <?php echo esc_attr( $attributes['control_name'] / 100 ); ?>">
  Content with opacity
</div>
Handlebars
<div style="opacity: calc({{control_name}} / 100)">
  Content with opacity
</div>
Post Meta
<?php
$value = get_lzb_meta( 'control_meta_name' );
?>
<div class="columns-<?php echo esc_attr( $value ); ?>">
  Content with columns
</div>

Common uses for Range control:

  • Opacity (0-100)
  • Number of columns (1-6)
  • Spacing values (0-100)
  • Font size (12-72)

Was this article helpful?