product category page: front-end sorting and filtering using turboframes

resources/views/components/ui/range-slider.blade.php

@@ -1,23 +1,28 @@
 @props([
     'min',
     'max',
-    'minValue'   => null,
-    'maxValue'   => null,
-    'step'       => 1,
-    'name'       => null,
-    'legend'     => 'Range',
-    'minLabel'   => 'Minimum',
-    'maxLabel'   => 'Maximum',
-    'prefix'     => '',
-    'suffix'     => '',
-    'separator'  => ' – ',
-    'resetLabel' => 'Reset',
+    'minValue'  => null,
+    'maxValue'  => null,
+    'step'      => 1,
+    'name'      => null,
+    'legend'    => 'Range',
+    'minLabel'  => 'Minimum',
+    'maxLabel'  => 'Maximum',
+    'prefix'    => '',
+    'suffix'    => '',
+    'separator' => ' – ',
 ])
 
+{{-- The default slot sits on the readout row, to the right of the min–max
+     text — use it for a "clear"/"reset" control when the slider is filtered.
+     Left empty otherwise. --}}
+
 @php
     $minValue ??= $min;
     $maxValue ??= $max;
-    $uid = 'rs-' . uniqid();
+    // Stable when a name is given so focus can survive a re-render; random
+    // otherwise, just to keep the label/input association unique on the page.
+    $uid = 'rs-' . ($name ?: uniqid());
 @endphp
 
 
@@ -46,7 +51,7 @@
                 max="{{ $max }}"
                 step="{{ $step }}"
                 value="{{ $minValue }}"
-                @if($name) name="{{ $name }}[min]" @endif
+                @if($name) name="{{ $name }}_min" @endif
                 data-range-slider-target="minInput"
                 data-action="input->range-slider#onInput change->range-slider#onChange focus->range-slider#syncFocus blur->range-slider#syncFocus"
             >
@@ -61,7 +66,7 @@
                 max="{{ $max }}"
                 step="{{ $step }}"
                 value="{{ $maxValue }}"
-                @if($name) name="{{ $name }}[max]" @endif
+                @if($name) name="{{ $name }}_max" @endif
                 data-range-slider-target="maxInput"
                 data-action="input->range-slider#onInput change->range-slider#onChange focus->range-slider#syncFocus blur->range-slider#syncFocus"
             >
@@ -111,12 +116,6 @@ class="absolute top-1/2 left-[var(--max)] grid h-8 w-6 -translate-x-1/2 -transla
         <span data-range-slider-target="output" aria-hidden="true" class="text-sm tabular-nums"
         >{{ $prefix }}{{ $minValue }}{{ $suffix }}{{ $separator }}{{ $prefix }}{{ $maxValue }}{{ $suffix }}</span>
 
-        <button
-            type="button"
-            hidden
-            data-range-slider-target="reset"
-            data-action="range-slider#reset"
-            class="underline-slide [--slide-h:1px] font-display text-sm font-bold uppercase italic"
-        >{{ $resetLabel }}</button>
+        {{ $slot }}
     </div>
 </div>