1. Update ShopController to Handle Price Filter

The `index` function in `ShopController.php` is updated to read the `min` and `max` price parameters from the query string and apply a whereBetween condition to filter products.

`ShopController.php` - `index` function update

public function index(Request $request)
{        
    // Existing size, order, brands, and categories filter logic...
    $size = $request->query("size") ? $request->query("size") : 12;
    $order = $request->query("orderby") ? $request->query("orderby") : 1;
    // ... switch case logic for $o_column and $o_order ...
    $f_brands = $request->query("brands");
    $f_categories = $request->query("categories");
    $brands = Brand::orderBy("name","ASC")->get(); // Assume fetched
    $categories = Category::orderBy("name","ASC")->get(); // Assume fetched
    // 1. Get Price Filter Parameters (Default: 1 to 500)
    $min_price = $request->query("min") ? $request->query("min") : 1;
    $max_price = $request->query("max") ? $request->query("max") : 500;
    
    // Start building the product query with existing filters
    $products = Product::where(function($query) use($f_brands){ 
        // ... brands filter logic ...
    })
    ->where(function($query) use($f_categories){ 
        // ... categories filter logic ...
    })
    // 2. Apply Price Filter Condition
    ->whereBetween("regular_price",[$min_price,$max_price]) 
    ->orderBy($o_column, $o_order)
    ->paginate($size);    
    
    // Return the new price variables to the view
    return view("shop", compact("products", "size", "order", "brands", "f_brands", "categories", "f_categories", "min_price", "max_price"));
} 

2. Update `shop.blade.php` for Price Range Slider

The view is updated with the price range slider HTML element and hidden inputs to pass the values to the controller. This example assumes the use of a library like ion.rangeSlider.

Price Filter HTML (Sidebar and Hidden Inputs)

<!-- Price Filter Widget -->
<div class="sidebar-widget price_range">
    <h4 class="widget-title">Filter by Price</h4>
    <!-- The actual price slider element -->
    <input type="text" id="price-range" name="price_range" value="">
</div>
<!-- Hidden Inputs inside the main filtering form (id="frmfilter") -->
<input type="hidden" name="min" id="hdnMinPrice" value="{{$min_price}}">
<input type="hidden" name="max" id="hdnMaxPrice" value="{{$max_price}}">

JavaScript for Slider Initialization and Submission

Initialize the slider with current min/max values and submit the form when the slider position changes.

@push("scripts")
<script>
    $(function() {
        // 1. Initialize ionRangeSlider
        $("#price-range").ionRangeSlider({
            type: "double",
            grid: false,
            min: 1,      // Absolute Minimum Price
            max: 500,    // Absolute Maximum Price (Adjust as needed)
            from: {{ $min_price }}, // Current selected min price from controller
            to: {{ $max_price }},   // Current selected max price from controller
            prefix: "$",
        });
        // 2. Event listener for range slider value change
        $("#price-range").on("change", function(){
            // Get the current selected min and max values (format: "min;max")
            var min = $("#price-range").val().split(";")[0];
            var max = $("#price-range").val().split(";")[1];
            // Update the hidden input fields
            $("#hdnMinPrice").val(min);
            $("#hdnMaxPrice").val(max);
            // Submit the form after a slight delay
            // This delay is often used with sliders to avoid submitting on every tiny movement
            setTimeout(() => {
                $("#frmfilter").submit();
            }, 2000); // Wait 2 seconds before submitting
        });
    });
</script>
@endpush