{% extends "forms/field.html.twig" %}

{% block input_attributes %}
    type="range"
    class="rangefield {% if field.classes is defined %}{{ field.classes }} {% endif %}"
    {% if field.validate.min %}min="{{ field.validate.min }}"{% endif %}
    {% if field.validate.max %}max="{{ field.validate.max }}"{% endif %}
    {% if field.validate.step %}step="{{ field.validate.step }}"{% endif %}
    {% if field.id is defined %}
        id="range_{{ field.id|e|replace({'.': '_'}) }}"
        oninput="number_{{ field.id|e|replace({'.': '_'}) }}_output.value = this.value"
    {% else %}
        id="range_{{ field.name|e|replace({'.': '_'}) }}"
        oninput="number_{{ field.name|e|replace({'.': '_'}) }}_output.value = this.value"
    {% endif %}
    {{ parent() }}
{% endblock %}
{% block append %}
    <input
        type="number"
        class="rangefield {% if field.classes is defined %}{{ field.classes }} {% endif %}"
        {% if field.validate.min %}min="{{ field.validate.min }}"{% endif %}
        {% if field.validate.max %}max="{{ field.validate.max }}"{% endif %}
        {% if field.validate.step %}step="{{ field.validate.step }}"{% endif %}
        {% if value %}
            value="{{ value }}"
        {% elseif field.default %}
            value="{{ field.default }}"
        {% else %}
            value="0"
        {% endif %}
        {% if field.id is defined %}
            id="number_{{ field.id|e|replace({'.': '_'}) }}_output"
            oninput="range_{{ field.id|e|replace({'.': '_'}) }}.value = this.value"
        {% else %}
            id="number_{{ field.name|e|replace({'.': '_'}) }}_output"
            oninput="range_{{ field.name|e|replace({'.': '_'}) }}.value = this.value"
        {% endif %}
    />
    <span class="range-append">{{ field.append }}</span>

{% endblock append %}