{% load i18n %}
<div class="daisyui-number-slider-widget w-flex w-items-center w-gap-2"
     id="{{ widget.attrs.id }}"
     data-controller="daisie-number-slider">
    <input type="range" class="daisyui-slider-range w-flex-1 w-w-full"
           data-daisie-number-slider-target="range"
           min="{{ widget.min }}" max="{{ widget.max }}" step="{{ widget.step }}"
           value="{{ widget.current }}">
    <input type="number" name="{{ widget.name }}"
           class="daisyui-number-input w-max-w-[5rem] w-text-end"
           data-daisie-number-slider-target="number"
           min="{{ widget.min }}" max="{{ widget.max }}" step="{{ widget.step }}"
           value="{{ widget.value }}">
    {% if widget.suffix %}
        <span class="w-text-meta">{{ widget.suffix }}</span>
    {% endif %}
</div>