---
title: "Range"
description: "Add Range control to your custom blocks for WordPress using the Lazy Blocks plugin."
url: "https://www.lazyblocks.com/docs/blocks-controls/range/"
lastUpdated: 2026-09-09
source: "blocks-controls/range.mdx"
---
# Range

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

## Control Settings

- **Minimum Value** (`min`) - left end of the slider
- **Maximum Value** (`max`) - right end of the slider
- **Step Size** (`step`) - distance between two slider stops

All three are empty by default. An empty end leaves the slider with no limit there, and an empty Step Size moves it in whole numbers. The Minimum Value and Maximum Value fields in the block builder carry the Step Size as their own step, so set it first when the ends are fractional.

## Usage

```php title="PHP" /$attributes['control_name']/
<div style="opacity: <?php echo esc_attr( $attributes['control_name'] / 100 ); ?>">
  Content with opacity
</div>
```

```hbs title="Handlebars" /{{control_name}}/
<div style="opacity: calc({{control_name}} / 100)">
  Content with opacity
</div>
```

```php title="Post Meta" /get_lzb_meta( 'control_meta_name' )/
<?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)

## Documentation Index
> Fetch the complete documentation index at: https://www.lazyblocks.com/llms.txt
> Fetch every page in a single file at: https://www.lazyblocks.com/llms-full.txt