Price range slider in livewire is not working

Question

I am new to livewire, need to make a price slider, I used noUiSlider in a livewire blade:

  <h4 class="widget-title"> Price 
    <span class="text-info"> {{$min}} - {{$max}} </span></h4>
     <div id="slider"  class="noUiSlider" wire:ignore> </div>

then used Js as in noUiSlider documentation in the end of blade:

  <script>
    $(document).ready(function () {
        var slider = document.getElementById('slider');

        noUiSlider.create(slider, {
            start: [1, 1000],
            connect: true,
            range: {
                'min': 1,
                'max': 1000
            },
            pips: {
                mode: 'steps',
                stepped: true,
                density: 4
            }
        });

         slider.noUiSlider.on('update', function (value){
        @this.set('min', value[0]);
        @this.set('max', value[1]);


        });


    });

</script>

Now I need to fetch range taken from user to display products in same price range, so livewire class as follows:

    class Range extends Component
{

    public $min;
    public $max;

    public function mount()
    {
        $this->min = 1;
        $this->max = 1000;

    }


    public function render()
    {
        $products = Product::whereBetween('selling_price', [$this->min, $this->max])->get();
        return view('livewire.range')->with([
            'products'=> $products
        ]);
    }
}

Now the issue is as well as i change slider without fetching products in price range Thanks and appreciated.

Answer 1

Livewire class

class ProductsComponent extends Component
{
    public $min;
    public $max;
    
    public function mount()
    {
        $this->min = 10;
        $this->max = 100000;
    }

    public function render()
    {
        $products = Product::whereBetween('price', [$this->min, $this->max])->get();
        return view('livewire.components.shop-area-component',['products' => $products]);
    }
}

livewire blade

<div class="price_filter">
    <div wire:ignore id="slider-range"></div>
    <div class="price_slider_amount">
        <span>Price :</span>
        <input type="text" id="amount" placeholder="Add Your Price" />
    </div>
</div>

@push('scripts')
<script>
    $("#slider-range").slider({
        range: true,
        min: 40,
        max: 600,
        values: [120, 570],
        slide: function (event, ui) {
            $("#amount").val("$" + ui.values[0] + " - $" + ui.values[1]);
            @this.set('min', ui.values[0])
            @this.set('max', ui.values[1])
        }
    });
    $("#amount").val("$" + $("#slider-range").slider("values", 0) + " - $" + $("#slider-range").slider("values", 1));
</script>
@endpush