Handle the displayed labels better

reachweb · Nov 5, 2024 · 74663f0 · 74663f0
1 parent f1dafe1
commit 74663f0
Showing 1 changed file with 10 additions and 3 deletions.
diff --git a/resources/views/livewire/filters/lf-dual-range.blade.php b/resources/views/livewire/filters/lf-dual-range.blade.php
@@ -3,6 +3,8 @@
         x-data="{
             selectedMin: $wire.selectedMin,
             selectedMax: $wire.selectedMax,
+            displayMin: $wire.selectedMin,
+            displayMax: $wire.selectedMax,
             min: {{ $min }},
             max: {{ $max }},
             step: {{ $step }},
@@ -33,21 +35,26 @@
                     }
                 });
 
+                // We are using two events so that the filter doesn't query the server every time the slider is moved
+                slider.noUiSlider.on('update', (values) => {
+                    this.displayMin = values[0];
+                    this.displayMax = values[1]; 
+                });
                 slider.noUiSlider.on('set', (values) => {
                     $wire.set('selectedMin', values[0]);
                     $wire.set('selectedMax', values[1]);
                 });
-                }
+            }
         }"
 
         class="w-full my-8"
     >
         <div class="relative">
             <div wire:ignore x-ref="slider" class="w-[93%] mx-auto"></div>
             <div class="flex justify-center mt-3">
-                <span class="font-bold" x-text="$wire.selectedMin"></span>
+                <span class="font-bold" x-text="displayMin"></span>
                 <span class="mx-2">{{ __('statamic-livewire-filters::ui.to') }}</span>
-                <span class="font-bold" x-text="$wire.selectedMax"></span>
+                <span class="font-bold" x-text="displayMax"></span>
             </div>
         </div>
     </div>