title: How to achieve filter by price range in Angular 6?
body: <p>I have an E-Commerce Site of watches ranging from $20 to $60 price.The project is devloped in Angular 6 and Firebase as database. I want to filter the products by price range i.e Under 20, 20 -30, 30 - 40 and so on... </p>
  
  <p>Following are the files used for price filter
  1. product-fliter.component.html</p>
  
  <pre><code>&lt;div class="list-group"&gt;
          &lt;a class="list-group-item list-group-item-action"
          [class.active]="!price" routerLink="/"&gt;
            All Price
          &lt;/a&gt;
          &lt;a *ngFor="let p of price$ | async" 
          class="list-group-item list-group-item-action"
          routerLink="/" [queryParams]="{ price : p.key}"
          [class.active]="price === p.key"&gt;     
                {{p.name}}
          &lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <ol start="2">
  <li>product-fliter.component.ts</li>
  </ol>
  
  <pre><code>price$;
    @Input('price') price;
  
  constructor(priceService: PriceService) { 
      this.price$ = priceService.getPrice();
    }
  </code></pre>
  
  <ol start="3">
  <li>price.service.ts</li>
  </ol>
  
  <pre><code>itemRef : any;
  
    constructor(private db: AngularFireDatabase) {}
  
    getPrice() {
      this.itemRef =  this.db.list('/price').snapshotChanges().pipe
      (map(changes =&gt; { return changes.map(c =&gt; ({ key: c.payload.key, 
      ...c.payload.val() }));
      }));
      return this.itemRef;  
    }
  </code></pre>
  
  <ol start="4">
  <li>home.component.ts
  (This is where I'am applying fliter logic)</li>
  </ol>
  
  <pre><code>private populateProducts() { 
      this.productService.getAll().subscribe(products =&gt; {
        this.products = products;
  
        this.route.queryParamMap.subscribe(params =&gt; {
  
            if(params.get('price') || this.price) {
            this.price= params.get('price');
            this.applyFilterPrice();
          } 
        });
      }); 
    }
  </code></pre>
  
  <p>Following are the images for reference
  <a href="https://i.stack.imgur.com/cEYvj.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/cEYvj.jpg" alt="Firebase Price Range"></a>
  <a href="https://i.stack.imgur.com/j9kez.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/j9kez.jpg" alt="Products View on Site"></a>
  I want the products to be filtered by their price. Any changes or any modifications would be well and good. I would like to know the working of Price Range Slider and its code in Angular 6.</p>