NumbersSyncer¶

NumbersSyncer element consists two Number elements that can be synchronized.

numbers0syncers

Options¶

Name	Type	Required	Description
firstLabel	string	yes	Label of first number element
secondLabel	string	yes	Label of second number element
prefix	string	no	Prefix
postfix	string	no	Postfix
placeholder	string	no	Placeholder
min	float	no	Minimal value of entered data
max	float	no	Maximum value of entered data

JSON

{
  "options": {
    "firstLabel": "From",
    "secondLabel": "To",
    "min": 1,
    "max": 99,
    "prefix": "-",
    "postfix": "%",
    "placeholder": "discount"
  }
}

firstLabel¶

string Required label for first number element.

secondLabel¶

string Required label for second number element.

min¶

float Optional minimum value of entered data.

max¶

float Optional maximum value of entered data.

prefix¶

string Optional parameter. The same prefix will be presented in both inputs.

postfix¶

string Optional parameter. The same postfix will be presented in both inputs.

placeholder¶

string Optional parameter. The same placeholder will be presented in both inputs.

Build-in Validators¶

Element have build-in one validator: float which validates both fields. If fields min, max are provided, it also validates submitted values.

Available Validators¶

Element does not have available validators.

Relations Support¶

Element does not support relations between elements.

Configuration output schema¶

schema

{
  "<element_type>" : "numbersSyncer",
  "<element_name>" : string,
  "<element_label>" : string,
  "<element_labelDescription>" : string,
  "<element_isRequired>" : bool,
  "<element_isHidden>" : bool,
  "<element_defaultValue>" : [],
  "<element_validators>" : []
}

minimal example

{
  "type" : "numbersSyncer",
  "name" : "numbersSyncer",
  "options" : {
    "firstLabel" : "From",
    "secondLabel" : "To"
  }
}

full example

{
  "type" : "numbersSyncer",
  "name" : "verticalPadding",
  "label" : "Padding",
  "labelDescription" : "Creates space around an element's content.",
  "hint" : {
    "message" : "For more information see [here](%s)",
    "placeholderValues" : ["https:\/\/someUrl.com"]
  },
  "isRequired" : true,
  "isHidden" : false,
  "options" : {
    "firstLabel" : "Top",
    "secondLabel" : "Bottom",
    "min": 0,
    "max": 10,
    "prefix" : "+",
    "postfix" : "px",
    "placeholder" : "10"
  },
  "defaultValue" : {
    "first" : 6,
    "second" : 7,
    "isSync" : false
  }
}

Element value¶

In twig there are accessible 3 keys:

Name	Type	Description
first	number	Value of first number element
second	number	Value of second number element
isSync	bool	Are values synchronized

twig usage

{% if moduleConfig.verticalPadding.isSync %}
    <div style="padding: {{ moduleConfig.verticalPadding.first }}px 0px;">
        ...
    </div>
{% else %}
    <div style="padding-top: {{ moduleConfig.verticalPadding.first }}px; padding-bottom: {{ moduleConfig.verticalPadding.second }}px;">
        ...
    </div>
{% endif %}