{% load ui_props %}

<c-vars name=""
        value="0"
        default_value=""
        min="0"
        max="100"
        step="1"
        big_step="10"
        min_steps_between="0"
        range="False"
        orientation="horizontal"
        size="md"
        variant="default"
        disabled="False"
        required="False"
        invalid="False"
        label=""
        description=""
        description_trailing=""
        error=""
        errors=""
        badge=""
        value_text=""
        lower_label="Minimum"
        upper_label="Maximum"
        lower_value_text=""
        upper_value_text=""
        show_value="False"
        format="number"
        field_class=""
        root_class=""
        track_class=""
        range_class=""
        thumb_class=""
        tick_class=""
        class="" />
<c-ui.field name="{{ name }}"
            label="{{ label }}"
            description="{{ description }}"
            description_trailing="{{ description_trailing }}"
            error="{{ error }}"
            :errors="errors"
            badge="{{ badge }}"
            required="{{ required }}"
            invalid="{% if invalid|ui_bool or error or errors %}True{% else %}False{% endif %}"
            disabled="{{ disabled }}"
            class="{{ field_class }}">
    <c-ui.slider.impl name="{{ name }}"
                      value="{{ value }}"
                      default_value="{{ default_value }}"
                      min="{{ min }}"
                      max="{{ max }}"
                      step="{{ step }}"
                      big_step="{{ big_step }}"
                      min_steps_between="{{ min_steps_between }}"
                      range="{{ range }}"
                      orientation="{{ orientation }}"
                      size="{{ size }}"
                      variant="{{ variant }}"
                      disabled="{{ disabled }}"
                      required="{{ required }}"
                      invalid="{% if invalid|ui_bool or error or errors %}True{% else %}False{% endif %}"
                      label="{{ label }}"
                      value_text="{{ value_text }}"
                      lower_label="{{ lower_label }}"
                      upper_label="{{ upper_label }}"
                      lower_value_text="{{ lower_value_text }}"
                      upper_value_text="{{ upper_value_text }}"
                      show_value="{{ show_value }}"
                      format="{{ format }}"
                      root_class="{{ root_class }}"
                      track_class="{{ track_class }}"
                      range_class="{{ range_class }}"
                      thumb_class="{{ thumb_class }}"
                      tick_class="{{ tick_class }}"
                      class="{{ class }}"
                      :attrs="attrs">
        {{ slot }}
    </c-ui.slider.impl>
</c-ui.field>