Laravel Product price range dynamic process

  

//blade file code

<div class="row mt-5">

                <div class="price-range-container">

                    <div class="price-range">

                        <form action="{{ route('products.filterByPrice') }}" method="post">

                            @csrf

                            <h3>Product Price Range</h3>

                            <label for="min-price">Minimum Price:</label>

                            <input type="range" id="min-price" min="0" max="10000" step="10" name="min_price"  value="{{ old('min_price') }}">

                            <span id="min-price-value">$0</span>

                            <br>

                            <label for="max-price">Maximum Price:</label>

                            <input type="range" id="max-price" min="0" max="10000" step="10" name="max_price"  value="{{ old('max_price') }}">

                            <span id="max-price-value">$10000</span> <br><br>

                            <button type="submit" class="btn btn-primary">Apply Filter</button>

                        </form>

                    </div>

                   

                  </div>

            </div>

//style for price range design

<style>

    /* Custom CSS */

    .price-range-container {

      margin-top: 50px;

    }

    .price-range {

      border: 1px solid #ddd;

      border-radius: 5px;

      padding: 20px;

    }

    .price-range label {

      font-weight: bold;

    }

    .price-range input[type="range"] {

      width: 100%;

      margin-top: 10px;

    }

  </style>

//js code

<script>

    // JavaScript for updating price range values

    document.addEventListener('DOMContentLoaded', function () {

      var minPriceInput = document.getElementById('min-price');

      var maxPriceInput = document.getElementById('max-price');

      var minPriceValue = document.getElementById('min-price-value');

      var maxPriceValue = document.getElementById('max-price-value');

 

      minPriceInput.addEventListener('input', function () {

        minPriceValue.textContent = '$' + this.value;

      });

 

      maxPriceInput.addEventListener('input', function () {

        maxPriceValue.textContent = '$' + this.value;

      });

    });

  </script>

 //product filter by Price range

  Route::post('/filter', 'filterByPrice')->name('products.filterByPrice');

//controller code

public function filterByPrice(Request $request)

    {

        $minPrice = $request->input('min_price');

        $maxPrice = $request->input('max_price');

        $products = Product::whereBetween('selling_price', [$minPrice, $maxPrice])->get();

        return view('front.product.shop', compact('products'));

    } //end method