0.0.4 • Published 6 years ago
ngx-rslide v0.0.4
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