distributedslider#

The distributedslider property creates a segmented numeric slider in the Page Builder UI. Unlike slider, which allows any value within a range, distributedslider snaps to evenly distributed breakpoints between 0 and 100 — ideal for layout widths, grid spacing, or percentage-based logic.

`Distributed Slider` Definition#

{
  "code": "container_width",
  "prompt": "Container Width %",
  "type": "distributedslider",
  "breaks": 4
}

Supported Fields#

Field	Type	Required	Description
`code`	string	Yes	Unique key used in `l.settings:instance`.
`prompt`	string	Yes	Label shown in the admin interface.
`type`	string	Yes	Must be `"distributedslider"`.
`required`	boolean	No	If `true`, a value must be selected before saving.
`breaks`	number	NoYes	Number of evenly spaced steps between 0 and 100.
`preview_property_selector`	string	No	Target element for PageBuilder Inspector.
`visibility_conditions`	object	No	Shows/hides field based on logic.

Field Behavior: `breaks`#

The breaks field defines how many equal segments to divide the 0–100 range into:

`breaks`	Slider Stops
2	0, 50, 100
3	0, 33.33, 66.66, 100
4	0, 25, 50, 75, 100
5	0, 20, 40, 60, 80, 100

Use this to control the granularity of allowed values without exposing arbitrary input.

`l.settings:instance` Structure#

:container_width:value=75

The output will be one of the evenly spaced values defined by the number of breaks.

Template Usage#

<div style="width: &mvte:instance:container_width:value;%; background: #eee;">
  Proportional content area
</div>

Use the selected percentage directly in inline styles or pass into utility classes or variables.

JavaScript Access#

<script>
  var instance = <mvt:eval expr="miva_json_encode( l.settings:instance, '' )" />;
  var width = instance.container_width.value;
</script>

`defaults` Definition#

To set a default width (e.g., 50%), include it in the defaults block:

"defaults": {
  "container_width": {
    "value": 50
  }
}

Best Practices#

Use breaks between 2 and 10 for usable snapping and visual clarity.
Avoid trying to simulate fine-grained sliders — use slider instead.
Perfect for layout widths, container spacing, or visual breakpoints.
Always define a default to prevent an unselected or 0% state unintentionally.

Complete Example#

{
  "code": "content_width",
  "prompt": "Content Area Width",
  "type": "distributedslider",
  "breaks": 3,
  "required": true
}

Output#

:content_width:value=66.66

Template#

<section style="width: &mvte:instance:content_width:value;%; background: #f0f0f0;">
  Flexible section
</section>

distributedslider#