Install ng2-toastr using npm

ng2-nouislider

npm install ng2-nouislider --save

Install nouislider using npm

nouislider

npm install nouislider --save

Include css file in angular.json file inside styles":[ ]

path

../node_modules/nouislider/distribute/nouislider.min.css

Add NouisliderModule into your UIComponentsModule class. ui-components.module would look like this

import {NgModule} from '@angular/core';
import { NouisliderModule } from 'ng2-nouislider';

@NgModule({
imports: [NouisliderModule]
})
export class UIComponentsModule { }
                

nouislider.component.html would look like this

<nouislider [min]="someMin" [max]="someMax" [step]="0.05" [(ngModel)]="someValue" [disabled]="disabled">Success</nouislider>
                        

Import NouiFormatter in NouiSliderComponent class. nouislider.component.ts would look like this

import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { FormGroup, FormBuilder } from "@angular/forms";
import { NouiFormatter } from "ng2-nouislider/src/nouislider";
@Component({
    selector: 'app-nouislider',
    templateUrl: './nouislider.component.html',
})

export class NouiSliderComponent {
    public disabled: boolean = false;
    public someValue: number = 5;
    public someMin: number = -10;
    public someMax: number = 10;
}