diff --git a/src/app/components/filter-side-bar/filter-side-bar.component.html b/src/app/components/filter-side-bar/filter-side-bar.component.html
index 9423810..b9d6b88 100644
--- a/src/app/components/filter-side-bar/filter-side-bar.component.html
+++ b/src/app/components/filter-side-bar/filter-side-bar.component.html
@@ -22,12 +22,12 @@
         <div class="p-3">
             <p class="mb-1 fs-5 fw-semibold">Prix</p>
             <div class="d-flex justify-content-center">
-                <input id="number" type="number" placeholder="min" min=0 value="" class="me-2" style="width: 45%;">
-                <input id="number" type="number" placeholder="max" value="" class="me-2" style="width: 45%;">
+                <input #minNum id="numberMin" type="number" placeholder="min" min=0 value="" class="me-2" style="width: 45%;">
+                <input #maxNum id="numberMax" type="number" placeholder="max" value="" class="me-2" style="width: 45%;">
             </div>
 
             <div class="d-flex justify-content-center">
-                <a href="#" class="btn btn-success m-3">Valider</a>
+                <button class="btn btn-success m-3" (click)="onSendValues(minNum, maxNum)">Valider</button>
             </div>
         </div>
     </ul>
diff --git a/src/app/components/filter-side-bar/filter-side-bar.component.ts b/src/app/components/filter-side-bar/filter-side-bar.component.ts
index e6aa792..d3bb300 100644
--- a/src/app/components/filter-side-bar/filter-side-bar.component.ts
+++ b/src/app/components/filter-side-bar/filter-side-bar.component.ts
@@ -8,6 +8,7 @@ import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 export class FilterSideBarComponent implements OnInit {
   @Input() listCategories: string[];
   @Output() stateNumber = new EventEmitter();
+  @Output() rangeNumber = new EventEmitter();
   filterStateNumber: number = 0;
   
   constructor() { 
@@ -25,4 +26,10 @@ export class FilterSideBarComponent implements OnInit {
     this.stateNumber.emit(this.filterStateNumber);
   }
 
+  onSendValues(minNum: any, maxNum: any): void {
+    let rangeArray: number[] = [parseFloat(minNum.value), parseFloat(maxNum.value)];
+    console.log(typeof(rangeArray[0]));
+    this.rangeNumber.emit(rangeArray);
+  }
+
 }
diff --git a/src/app/pages/page-accueil/page-accueil.component.html b/src/app/pages/page-accueil/page-accueil.component.html
index 20de017..ce25eb3 100644
--- a/src/app/pages/page-accueil/page-accueil.component.html
+++ b/src/app/pages/page-accueil/page-accueil.component.html
@@ -1,5 +1,5 @@
 <div class="d-flex align-items-stretch">
-    <app-filter-side-bar [listCategories]="listCategoriesFilter" (stateNumber)="onRatingFilter($event)"></app-filter-side-bar>
+    <app-filter-side-bar [listCategories]="listCategoriesFilter" (stateNumber)="onRatingFilter($event)" (rangeNumber)="onPriceFilter($event)"></app-filter-side-bar>
 
     <div class="custom-main container p-3">
         <input class="form-control" 
diff --git a/src/app/pages/page-accueil/page-accueil.component.ts b/src/app/pages/page-accueil/page-accueil.component.ts
index fc1bc77..f5e92cf 100644
--- a/src/app/pages/page-accueil/page-accueil.component.ts
+++ b/src/app/pages/page-accueil/page-accueil.component.ts
@@ -10,13 +10,11 @@ import * as _ from 'underscore';
 export class PageAccueilComponent implements OnInit {
   public listData: any[];
   public listDataGlobal: any[];
-  public listRate: any[];
   public listCategoriesFilter: string[];
 
   constructor(private plantouneService: PlantouneService) {
     this.listData = [];
     this.listDataGlobal = [];
-    this.listRate = [];
     this.listCategoriesFilter = [];
    }
 
@@ -70,15 +68,25 @@ export class PageAccueilComponent implements OnInit {
   }
 
   onRatingFilter(stateNumber: number): void {
-    console.log(stateNumber);
-    this.listRate = [];
+    let listRate: any[] = [];
     this.listDataGlobal.forEach(product => {
       if(product.product_rating >= stateNumber) {
-        this.listRate.push(product);
+        listRate.push(product);
       }
     });
-    console.log(this.listRate);
-    this.listData = [...this.listRate];
+    this.listData = [...listRate];
+    if(this.listData.length >= 9) this.listData.length = 9;
+  }
+
+  onPriceFilter(rangeNumber: number[]) {
+    console.log(rangeNumber);
+    let listRangedProduct: any[] = [];
+    this.listDataGlobal.forEach(product => {
+      if(parseFloat(product.product_unitprice_ati) >= rangeNumber[0] && parseFloat(product.product_unitprice_ati) <= rangeNumber[1]) {
+        listRangedProduct.push(product);
+      }
+    });
+    this.listData = [...listRangedProduct];
     if(this.listData.length >= 9) this.listData.length = 9;
   }