<div class="js-range-slider range-slider form-group {{ styleModifier | default('') }}"
data-range-slider-range='{"min": {{ min|default(0.0) }}, "max": {{ max }}}'
data-range-slider-start="[{{ minVal|default(min|default(0.0)) }},{{ maxVal|default(max) }}]"
>
<div class="form-control-label font-default-bold">{{ label }}</div>
<div class="js-range-slider__slider range-slider__slider"></div>
<div class="range-slider__values row">
<div class="col-6">
<label for="{{ name }}Min" class="sr-only">input minimum</label>
<input aria-labelledby="{{ name }}InputLabel" name="{{ name }}Min" id="{{ name }}Min" type="text" data-range="true" class="form-control js-range-slider__min" hidden readonly/>
<div>
<span class="js-range-slider__val-min"></span> {{ prefix|default('') }}
</div>
</div>
<div class="col-6 text-right">
<label for="{{ name }}Max" class="sr-only">input maximum</label>
<input aria-labelledby="{{ name }}InputLabel" name="{{ name }}Max" id="{{ name }}Max" type="text" data-range="true" class="form-control js-range-slider__max" hidden readonly/>
<div>
<span class="js-range-slider__val-max"></span> {{ prefix|default('') }}
</div>
</div>
</div>
</div>