{% load i18n %}

    <div class="form-group" ng-if="question.widget_type === 'range'">
        {% include 'projects/project_questions_question_label.html' %}
        {% include 'projects/project_questions_question_help.html' %}
        {% include 'projects/project_questions_question_warning.html' %}

        <div ng-if="question.is_collection">
            {% include 'projects/project_questions_add_field_help.html' %}
        </div>

        <div ng-repeat="value in service.values[question.attribute][valueset.set_prefix][valueset.set_index] track by $index">
            <div class="collection" ng-hide="value.removed">
                <div class="options">
                    {% include 'projects/project_questions_default.html' %}
                    {% include 'projects/project_questions_remove_field.html' %}
                </div>

                <div class="input-group">
                    <span class="input-group-addon">
                        <span class="range-display">{$ value.text | number:1 $}</span>
                    </span>
                    <input type="range" percent-range class="form-control range-input"
                        min="0" max="100" step="{$ question.step $}"
                        data-min-value="{$ question.minimum $}"
                        data-max-value="{$ question.maximum $}"
                        ng-attr-id="id_{$ question.attribute $}_{$ valueset.set_prefix $}_{$ valueset.set_index $}_{$ $index $}"
                        ng-model="value.text"
                        ng-disabled="service.project.read_only"
                        ng-change="service.changed(value, true)"
                        ng-class="{'default-value': service.isDefaultValue(question, value)}"/>
                </div>
            </div>
        </div>

        <div ng-if="question.is_collection">
            {% include 'projects/project_questions_add_field_button.html' %}
        </div>
    </div>
