ngx-rslide

Installation

To install slider, run:

$ npm install ngx-rslide --save

Using slider

You can import slider module in any Angular application by running:

$ npm install ngx-rslide --save

and then add SliderModule in your module, for example AppModule:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
// import SliderModule
import { SliderModule } from './modules/slider/slider.module';


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    // Declare SliderModule in the 'imports' section of your module
    SliderModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Once slider is imported, you can use it in your Angular application:

app.component.html:

<ngx-rslide [step]="5" [min]="20" [max]="60" [(values)]="values"></ngx-rslide>

app.component.ts:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  values = [0, 50];
}

Common API

Property	Description	Default	Type
@Input() min	The minimum value of the slider	0	number / null
@Input() max	The minimum value of the slider	100	number / null
@Input() step	The values at which the thumb will snap	1	number / null
@Input() values	Values of slider	[0]	Array<number> / null
@Output() valuesChange	Event emitted when the slider values has changed		EventEmitter<Array<number>>

License

MIT © bezzubov egor