Level 58
Creating a range slider in Livewire that allows users to select a minimum and maximum value can be achieved by using a combination of Livewire's data binding and JavaScript interactivity. Here's a step-by-step solution to create a price slider that interacts with the Livewire component.
First, ensure you have Livewire installed and set up in your Laravel application.
- Create a Livewire component for the price slider.
php artisan make:livewire PriceSlider
- In your
PriceSlidercomponent (app/Http/Livewire/PriceSlider.php), define the properties for the minimum and maximum values.
namespace App\Http\Livewire;
use Livewire\Component;
class PriceSlider extends Component
{
public $minPrice;
public $maxPrice;
public function mount($minPrice = 0, $maxPrice = 1000)
{
$this->minPrice = $minPrice;
$this->maxPrice = $maxPrice;
}
public function render()
{
return view('livewire.price-slider');
}
}
- Create the view for the component (
resources/views/livewire/price-slider.blade.php). Use thewire:modeldirective to bind the slider values to the Livewire component properties.
<div>
<input type="range" min="0" max="1000" value="{{ $minPrice }}" wire:model="minPrice" id="minPrice">
<input type="range" min="0" max="1000" value="{{ $maxPrice }}" wire:model="maxPrice" id="maxPrice">
<span>Min Price: {{ $minPrice }}</span>
<span>Max Price: {{ $maxPrice }}</span>
</div>
@push('scripts')
<script>
let minInput = document.getElementById('minPrice');
let maxInput = document.getElementById('maxPrice');
minInput.addEventListener('input', function () {
if (parseInt(minInput.value) > parseInt(maxInput.value)) {
minInput.value = maxInput.value;
}
});
maxInput.addEventListener('input', function () {
if (parseInt(maxInput.value) < parseInt(minInput.value)) {
maxInput.value = minInput.value;
}
});
</script>
@endpush
- Include the Livewire scripts and styles in your main layout (
resources/views/layouts/app.blade.phpor similar).
<head>
...
@livewireStyles
</head>
<body>
...
@livewireScripts
</body>
- Use the Livewire component in your view where you want the price slider to appear.
<livewire:price-slider />
- Now, you can use the
$minPriceand$maxPriceproperties within your Livewire component to filter your Products table. For example, you might have a method that queries the products based on the selected price range:
public function updated($propertyName)
{
$this->validateOnly($propertyName, [
'minPrice' => 'numeric|min:0',
'maxPrice' => 'numeric|max:1000',
]);
// Query your products table with the new minPrice and maxPrice
$products = Product::whereBetween('price', [$this->minPrice, $this->maxPrice])->get();
// Do something with the products
}
Remember to replace the min and max values in the input range with the actual minimum and maximum values of your products' prices. Also, adjust the validation rules as needed for your specific use case.
This solution provides a basic range slider that updates the Livewire component's properties in real-time, which you can then use to filter your products.
