Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

ngx-rslide

BezzubovEgor5MIT0.0.4TypeScript support: included

Installation

angular, angular2, angular4, angular5, ngx, range-slider, slider, range, ng2

readme

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