<div class="form-group {{ field.getAttributesJsonDecoded()['parentcss'] }} {% if is_multiform and multiform_orientation == 'next' %}col px-1{% endif %}">
    {% if field.getAttributesJsonDecoded()['label'] is not empty %}
        <label for="tsform-field-{{ field.fieldid }}-{{ index }}" class="ts-forms-label w-100 {% if field.getAttributesJsonDecoded()['tooltip'] %}mb-3{% endif %}
        {% if field.getAttributesJsonDecoded()['labelPosition'] == "center" %}text-center{% elseif field.getAttributesJsonDecoded()['labelPosition'] == "right"%}text-right{% else %}text-left{% endif %}"
        >{{ field.getAttributesJsonDecoded()['label'] }}</label>
    {% endif %}
    {% if field.getAttributesJsonDecoded()['valueLabels'] is defined and field.getAttributesJsonDecoded()['valueLabels']|trim != '' %}
        <style>
            .ts-slider-value-labels {
                display: flex !important;
                justify-content: space-between !important;
            }
        </style>
        <div class="ts-slider-value-labels {% if field.getAttributesJsonDecoded()['tooltip'] %}ts-slider-value-labels--tooltip{% else %}mb-1{% endif %}" id="tsform-field-{{ field.fieldid }}-labels-{{ index }}"></div>
    {% endif %}
    {% if not field.getAttributesJsonDecoded()['tooltip'] %}
        <input type="range" 
        class="ts-forms-element{% if submitmanually %}-{{ formid }}{% endif %} form-control-range p-0 {{ field.getAttributesJsonDecoded()['css'] }}" 
        id="tsform-field-{{ field.fieldid }}-{{ index }}"
        min="{{ field.getAttributesJsonDecoded()['min'] }}"
        max="{{ field.getAttributesJsonDecoded()['max'] }}"
        step="{{ field.getAttributesJsonDecoded()['step'] }}"
        {% if field.getAttributesJsonDecoded()['valueLabels'] is defined and field.getAttributesJsonDecoded()['valueLabels']|trim != '' %}
        data-value-labels="{{ field.getAttributesJsonDecoded()['valueLabels']|e('html_attr') }}"
        {% endif %}
        data-fieldid="{{ field.fieldid }}"

        {% if field.getFormdata() is not empty and not keepdata %}
            value="{{ field.getFormdata().getData() }}"
        {% else %}
            value="{{ field.getAttributesJsonDecoded()['value'] }}"
        {% endif %}

        {% if field.getAttributesJsonDecoded()['disabled'] or usermodus or saveOnceDisable %}
            disabled
        {% endif %}
        >
    {% else %}
        <input type="text" 
        class="ts-forms-element{% if submitmanually %}-{{ formid }}{% endif %} {{ field.getAttributesJsonDecoded()['css'] }}" 
        id="tsform-field-{{ field.fieldid }}-{{ index }}"
        data-slider-min="{{ field.getAttributesJsonDecoded()['min'] }}"
        data-slider-max="{{ field.getAttributesJsonDecoded()['max'] }}"
        data-slider-step="{{ field.getAttributesJsonDecoded()['step'] }}"
        {% if field.getFormdata() is not empty and not keepdata %}
            data-slider-value="{{ field.getFormdata().getData() }}"
        {% else %}
            data-slider-value="{{ field.getAttributesJsonDecoded()['value'] }}"
        {% endif %}
        data-slider-id="tsform-field-{{ field.fieldid }}-slider-{{ index }}"
        value=""
        {% if field.getAttributesJsonDecoded()['valueLabels'] is defined and field.getAttributesJsonDecoded()['valueLabels']|trim != '' %}
        data-value-labels="{{ field.getAttributesJsonDecoded()['valueLabels']|e('html_attr') }}"
        {% endif %}
        data-fieldid="{{ field.fieldid }}"
        {% if field.getAttributesJsonDecoded()['colorschema'] == "ryg" %}
            data-slider-rangeHighlights='[{ "start": {{ field.getAttributesJsonDecoded()['min'] }}, "end": {{ (field.getAttributesJsonDecoded()['max']-field.getAttributesJsonDecoded()['min'])/3 }}, "class": "slider-red" },
                                            { "start": {{ (field.getAttributesJsonDecoded()['max']-field.getAttributesJsonDecoded()['min'])/3 }}, "end": {{ ((field.getAttributesJsonDecoded()['max']-field.getAttributesJsonDecoded()['min'])/3)*2 }}, "class": "slider-yellow" },
                                            { "start": {{ ((field.getAttributesJsonDecoded()['max']-field.getAttributesJsonDecoded()['min'])/3)*2 }}, "end": {{ field.getAttributesJsonDecoded()['max'] }}, "class": "slider-green" }]'
        {% elseif field.getAttributesJsonDecoded()['colorschema'] == "gyr" %}
            data-slider-rangeHighlights='[{ "start": {{ field.getAttributesJsonDecoded()['min'] }}, "end": {{ (field.getAttributesJsonDecoded()['max']-field.getAttributesJsonDecoded()['min'])/3 }}, "class": "slider-green" },
                                            { "start": {{ (field.getAttributesJsonDecoded()['max']-field.getAttributesJsonDecoded()['min'])/3 }}, "end": {{ ((field.getAttributesJsonDecoded()['max']-field.getAttributesJsonDecoded()['min'])/3)*2 }}, "class": "slider-yellow" },
                                            { "start": {{ ((field.getAttributesJsonDecoded()['max']-field.getAttributesJsonDecoded()['min'])/3)*2 }}, "end": {{ field.getAttributesJsonDecoded()['max'] }}, "class": "slider-red" }]'
        {% endif %}
        >
        <script>
            {% if field.getAttributesJsonDecoded()['disabled'] or usermodus or saveOnceDisable %}
                var enabled = false;
            {% else %}
                var enabled = true;
            {% endif %}
            var slider = new Slider("#tsform-field-{{ field.fieldid }}-{{ index }}", {
                tooltip: 'always',
                enabled: enabled{% if field.getAttributesJsonDecoded()['tooltipText']|trim != "" %}, {# Achtung: Komma ist wichtig undmuss genau hier stehen ohne Leerzeichen #}
                formatter: function (value) {
                    {{ field.getAttributesJsonDecoded()['tooltipText']|raw }}
                }
                {% endif %}
            }).on('slideStop', function(e) {
                document.getElementById('tsform-field-{{ field.fieldid }}-{{ index }}').value = e;
            });
        </script>
        
        {% if field.getAttributesJsonDecoded()['colorschema'] == "ryg" or field.getAttributesJsonDecoded()['colorschema'] == "gyr" %}
            <style>
                #tsform-field-{{ field.fieldid }}-slider-{{ index }} .slider-selection{
                    background-image:none!important;
                    background: #ffffff;
                }

                #tsform-field-{{ field.fieldid }}-slider-{{ index }} .slider-rangeHighlight {
                    border-radius: 0px;
                }

                #tsform-field-{{ field.fieldid }}-slider-{{ index }} .slider-rangeHighlight:nth-child(4) {
                    border-top-left-radius: 4px;
                    border-bottom-left-radius: 4px;
                }

                #tsform-field-{{ field.fieldid }}-slider-{{ index }} .slider-rangeHighlight:last-child {
                    border-top-right-radius: 4px;
                    border-bottom-right-radius: 4px;
                }
            </style>
        {% endif %}
    {% endif %}
    {% if saveOnceDisable %} 
        <span class="help-block text-muted">Sie haben dieses Formular am {{ saveOnceDate|date("d.m.Y") }} um {{ saveOnceDate|date("H:i") }} Uhr bereits gespeichert.</span>
    {% endif %}
  </div>