Skip to content

slider#

The slider property creates a numeric input using a draggable slider UI. It is ideal for values like font sizes, widths, percentages, spacing, or opacity. The result is stored in l.settings:instance as a number within a defined range.

Slider Definition#

{
  "code": "banner_opacity",
  "prompt": "Banner Opacity",
  "type": "slider",
  "range_low": 0,
  "range_high": 100,
  "precision": 0,
  "scale": 1
}

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 "slider".
required boolean No If true, a value must be selected before saving.
range_low number Yes Minimum allowed value.
range_high number Yes Maximum allowed value.
precision number No Number of decimal places to display.
scale number No Multiplier applied to the stored value.
preview_property_selector string No Target element for PageBuilder Inspector.
visibility_conditions object No Shows/hides field based on logic.

Field Behavior: range_low & range_high#

These two fields define the minimum and maximum values the user can select.

  • range_low: Lowest possible value on the slider
  • range_high: Highest possible value on the slider

Example:

"range_low": 10,
"range_high": 100

This creates a slider from 10 to 100.

Field Behavior: precision#

Controls the number of decimal places allowed in the value.

  • 0 = integer only
  • 1 = one decimal place (e.g., 12.3)
  • 2 = two decimal places (e.g., 12.34)
  • -1 = use default precision

Example:

"precision": 2

This allows values like 50.25.

Field Behavior: scale#

Applies a multiplier to the stored value when it’s rendered.

  • scale: 1 → No effect (actual value is displayed)
  • scale: 100 → Value of 0.5 would become 50 for rendering
  • scale: -1 → Use default behavior

Example:

"scale": 10

This means a value of 6.5 would become 65 in the template or preview.

Combined Example

{
  "code": "image_scale",
  "prompt": "Image Scale %",
  "type": "slider",
  "range_low": 0.5,
  "range_high": 1.5,
  "precision": 2,
  "scale": 100
}
  • Admin UI range = 0.50 – 1.50
  • Template output (with scale) = 50 – 150

Output

:image_scale:value=1.2

<img style="transform: scale(&mvte:instance:image_scale:value;);" />

l.settings:instance Structure#

:banner_opacity:value=80

The value is a number based on the current slider position.

Template Usage#

<div style="opacity: &mvte:instance:banner_opacity:value;%;">Banner</div>

<mvt:if expr="l.settings:instance:banner_opacity:value GT 75">
  <p>High opacity mode</p>
</mvt:if>

JavaScript Access#

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

defaults Definition#

Set a default value in your defaults block:

"defaults": {
  "banner_opacity": {
    "value": 100
  }
}

Best Practices#

  • range_low and range_high must be provided.
  • Use precision: 0 for whole numbers, or increase it for decimals.
  • Use scale to format or convert values — e.g. 0.5 × 100 = 50%.
  • Sliders provide strong UX for real-time feedback, especially when controlling spacing, sizes, or visual elements.
  • The value is stored as a plain number — not a percentage string or unit-based string.

Complete Example#

{
  "code": "spacing_size",
  "prompt": "Spacing Size",
  "type": "slider",
  "required": true,
  "range_low": 0,
  "range_high": 50,
  "precision": 1,
  "scale": 1
}

Output#

:spacing_size:value=25.0

Template#

<div style="margin-bottom: &mvte:instance:spacing_size:value;px;">
  Spaced content
</div>