ngx-slider is a standalone, mobile compatible slider component for Angular 6+ based on the angularjs-range slider.

angular range slider two handles, range slider angularjs, angular range slider component, react range slider example, material ui range slider, range slider javascript

A Multi-Range Slider Component Using Angular 7+

How to make use of it:

1. To add the scrollbar to your Angular project:

npm install --save @angular-slider/ngx-slider

2. Once installed, add the slider to your app.module.ts:

import { NgxSliderModule } from '@angular-slider/ngx-slider';

...

@NgModule({
   ...
   imports: [
     ...
     NgxSliderModule,
    ...
   ],
   ...
})
export class AppModule {}

3. You can now use the slider component in your application components.

import { Options } from '@angular-slider/ngx-slider';
...

@Component({...})
export class AppComponent {
  value: number = 100;
  options: Options = {
    floor: 0,
    ceil: 200
  };
}

4. And in the template file app.component.html:

<ngx-slider [(value)]="value" [options]="options"></ngx-slider>

Range Slider Control Component, ngx-slider Plugin/Github, react range slider angular js

See Demo And Download

Official Website(angular-slider): Click Here

This superior jQuery/javascript plugin is developed by angular-slider. For extra Advanced Usages, please go to the official website.