Clever Component Library

Form Block Range: Default 

<div class="form-block form-block--range form-block--range-example">
    <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>
 
<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"
  }
}
  • Handle: @form-block-range--default
  • Preview:
  • Filesystem Path: resources/components/02-units/form-blocks/range/range.twig

Form Blocks

Purpose: Used to allow the user to input information.