ng2-nouislider
Angular2 nouislider component
See demos
Install
npm i --save nouislider ng2-nouislider
Import
import { NouisliderModule } from 'ng2-nouislider';
Styles
@import "~nouislider/distribute/nouislider.min.css";
SystemJS config
Add to map:
'nouislider': 'node_modules/nouislider',
'ng2-nouislider': 'node_modules/ng2-nouislider',
Add to packages:
'nouislider': { main: 'distribute/nouislider.js', defaultExtension: 'js' },
'ng2-nouislider': { main: 'src/nouislider.js', defaultExtension: 'js' },
Usage
Using ngModel
<nouislider [connect]="true" [min]="0" [max]="15" [(ngModel)]="someRange"></nouislider>
Within reactive forms
this.form1 = this.formBuilder.group({ 'single': [ 10 ] });<form [formGroup]="form">
<nouislider [min]="0" [max]="20" [step]="0.5" [formControl]="form.controls.slider"></nouislider>
</form>Start development
npm i
npm start
open http://localhost:8080
License
MIT