Package Exports
- ngx-rslide
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (ngx-rslide) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
ngx-rslide
Installation
To install slider, run:
$ npm install ngx-rslide --saveUsing slider
You can import slider module in any Angular application by running:
$ npm install ngx-rslide --saveand 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