<div class="form-block form-block--range form-block--range-example has-error">
<div class="form-input form-input--range">
<label for="range-example">This is a a range control</label>
<div class="form-group">
<div role="slider" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
<input id="range-example" name="range-example" type="range" step="0" value="0" min="0" max="100">
</div>
</div>
</div>
<div class="form-block-validation-message">
<p>This form has failed validation.</p>
</div>
</div>
<div class="form-block form-block--range form-block--{{ formBlockName }}{% if formBlockValidationMessage %} has-error{% endif %}">
<div class="form-input form-input--range">
<label for="{{ formBlockName }}">{{ formBlockLabel }}</label>
<div class="form-group">
<div role="slider" aria-valuenow="{{ formBlockRangeSettings.min|default(0) }}" aria-valuemin="{{ formBlockRangeSettings.min|default(0) }}" aria-valuemax="{{ formBlockRangeSettings.max }}">
<input id="{{ formBlockName }}" name="{{ formBlockName }}" type="range" step="{{ formBlockRangeSettings.step }}" value="{{ formBlockRangeSettings.min|default(0) }}" min="{{ formBlockRangeSettings.min|default(0) }}" max="{{ formBlockRangeSettings.max }}">
</div>
</div>
</div>
{% if formBlockValidationMessage %}
<div class="form-block-validation-message">
<p>{{ formBlockValidationMessage }}</p>
</div>
{% endif %}
</div>
{
"formBlockLabel": "This is a a range control",
"formBlockName": "range-example",
"formBlockRangeSettings": {
"min": "0",
"max": "100",
"step": "0"
},
"formBlockValidationMessage": "This form has failed validation."
}
Purpose: Used to allow the user to input information.