{# Slider, ported from shadcn/ui.

   Radix builds the track and thumb from divs driven by pointer events;
   a native <input type="range"> already does that, including keyboard
   arrows and posting with a plain form submit. So this keeps the native
   control, tints it with `accent-primary`, and uses Alpine only for the
   value readout beside it. #}
{% macro slider(name, label, min=0, max=100, step=1, value=0, suffix=none) %}
<div class="mb-4" x-data="{ value: {{ value }} }">
  <div class="flex items-baseline justify-between gap-2">
    <label for="slider-{{ name }}" class="{{ ui('label') }}">{{ label }}</label>
    <output for="slider-{{ name }}" class="{{ ui('slider', 'output') }}">
      <span x-text="value">{{ value }}</span>{% if suffix %}{{ suffix }}{% endif %}
    </output>
  </div>
  <div class="mt-2 {{ ui('slider') }}">
    <input type="range" id="slider-{{ name }}" name="{{ name }}"
           min="{{ min }}" max="{{ max }}" step="{{ step }}" value="{{ value }}"
           x-model="value" class="{{ ui('slider', 'track') }}">
  </div>
</div>
{% endmacro %}