{% extends "@bazar/layouts/input.twig" %}

{% block input %}
    {{ include_css('tools/bazar/presentation/styles/inputs/range.css') }}

    <div class="input-group range-wrap">
        {% set defaultValue = ((((field.size != "0" and field.size is empty) ? 0 : field.size)|number_format + 
                ((field.maxChars != "0" and field.maxChars is empty) ? 100 : field.maxChars)|number_format)/2)|round(0,'ceil') %}
        <input
            type="{{ field.subType }}"
            value="{{ value }}"
            id="{{ field.name }}"
            name="{{ field.name }}"
            class="form-control input-xxlarge"
            min="{{ field.size }}"
            max="{{ field.maxChars }}"
            data-default="{{ defaultValue }}"
            {% if field.pattern %}pattern="{{ field.pattern }}"{% endif %}
            placeholder="{{ field.label|raw('html')|striptags }}"
            {% if field.required %}required{% endif %}
        />
        <output class="range-output">{{ value is empty ? defaultValue : value }}</output>
    </div>
{% endblock %}
