{% load ui_classes %}

<c-vars value="0" label="" class="" />
{% ui_class "ui.slider" "tick" orientation="horizontal" class=class as tick_class %}
{% ui_class "ui.slider" "tickMark" orientation="horizontal" as tick_mark_class %}
{% ui_class "ui.slider" "tickLabel" as tick_label_class %}
<span data-ui-slider-tick
      data-value="{{ value }}"
      class="{{ tick_class }}"
      {{ attrs }}>
    <span data-ui-slider-tick-mark class="{{ tick_mark_class }}" aria-hidden="true"></span>
    {% if label or slot %}
        <c-ui.text as="span"
                   size="xs"
                   color="muted"
                   class="{{ tick_label_class }}"
                   data-ui-slider-tick-label>
            {% if label %}
                {{ label }}
            {% else %}
                {{ slot }}
            {% endif %}
        </c-ui.text>
    {% endif %}
</span>