In this video we are going to learn about adding price filter on shop page.
So let see how can we add price filter on shop page.
For adding price filter lets use the noUiSlider.
So first of all lets add the noUiSlider cdn to the our project.
For that Switch to browser and open new tab and go to the google.
Now here search noUiSlider cdn.
Now lets click on link which is for noUiSlider cdn.
And from here lets copy the noUiSlider.min.js and nouislider.min.css.
So first copy the nouislider.min.css and inside the base.blade.php file head part.
After this paste noUiSlider.min.js cdn on bottom of the page.

Now go to the ShopComponent.php class file and create two properties.

public $min_price=1;
public $max_price=1000;

Now here lets make changes in render method as following.

public function render()
{  
	if($this->sorting=='date')   
	{
		$products = Product::whereBetween('regular_price',[$this->min_price,$this->max_price])->orderBy('created_at','DESC')->paginate($this->pagesize);  
	}
	else if($this->sorting==\"price\")
	{
		$products = Product::whereBetween('regular_price',[$this->min_price,$this->max_price])->orderBy('regular_price','ASC')->paginate($this->pagesize); 
	}
	else if($this->sorting==\"price-desc\")
	{
		$products = Product::whereBetween('regular_price',[$this->min_price,$this->max_price])->orderBy('regular_price','DESC')->paginate($this->pagesize); 
	}
	else{
		$products = Product::whereBetween('regular_price',[$this->min_price,$this->max_price])->paginate($this->pagesize);  
	}   
	
	$categories = Category::all();  
	
	return view('livewire.shop-component',['products'=> $products,'categories'=>$categories])->layout(\"layouts.base\");
}

After this go to the shop-component.blade.php view file and add the following code inside the sidebar.

<div class=\"widget mercado-widget filter-widget price-filter\">
	<h2 class=\"widget-title\">Price <span class=\"text-info\">${{$min_price}} - ${{$max_price}}</span></h2>
	<div class=\"widget-content\" style=\"padding:10px 5px 40px 5px;\">                                             
		<div id=\"slider\" wire:ignore></div>                       
	</div>
</div>

Now in this view file go to the bottom of the page and add the following code.

@push('scripts')
    <script>
        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_price',value[0]);
            @this.set('max_price',value[1]);
        });
    </script>
@endpush

Now its done, so lets check it.
So switch to browser and refresh the page.
And now lets slide the price slider.
And here you can see the price range this is minprice and this is maxium price.
And you can see here the product according to the price range.
If I set the min price this and max this you can see the product which are in this price range.
So in this way you can add price filter on shop page.