We support #BlackLivesMatters !
If you support us then follow us by clicking here and following us!

How to have price range slider in with min and max price Angular?

Get support on Angular & Typescript related technology.
Post Reply
admin
Site Admin
Posts: 44

How to have price range slider in with min and max price Angular?

Post by admin » Fri Aug 30, 2019 3:19 pm

How to have price range slider in with min and max price Angular?

Open your terminal and install below dependancy:

Code: Select all

npm install --save ng5-slider
Blow is the complete code:

app.module.ts

Code: Select all

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { Ng5SliderModule } from 'ng5-slider';

import { AppComponent } from './app.component';

@NgModule({
  imports:      [ BrowserModule, FormsModule, Ng5SliderModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

app.component.ts

Code: Select all

import { Component } from '@angular/core';
import { Options, LabelType } from 'ng5-slider';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.scss' ]
})
export class AppComponent  {
  minValue: number = 100;
  maxValue: number = 500;
  options: Options = {
    floor: 0,
    ceil: 500,
    translate: (value: number, label: LabelType): string => {
      switch (label) {
        case LabelType.Low:
          return '<b>Min price:</b> Rs. ' + value;
        case LabelType.High:
          return '<b>Max price:</b> Rs. ' + value;
        default:
          return 'Rs. ' + value;
      }
    }
  };
}

You can change currency as per your needs.
app.component.html

Code: Select all

<h2>Price Slider Demo by DevelopersDiscussion.com</h2>
<br/>
<ng5-slider [(value)]="minValue" [(highValue)]="maxValue" [options]="options"></ng5-slider>

Please note that here I'm writing my code in app.component.ts and app.component.html but as per your project's requirement you can write your code in your component's html and ts file.

Demo : https://angular-price-range-slider-deve ... ckblitz.io

Image

Post Reply