ng2-nouislider-prot

Angular2 nouislider component.

Note: this version is a fork of tomaszbak's to provide subclass access to the native DOM element.

See demos

Install

npm i --save nouislider ng2-nouislider-prot

Import

import { NouisliderModule } from 'ng2-nouislider-prot';

Styles

@import "~nouislider-prot/distribute/nouislider.min.css";

SystemJS config

Add to map:

'nouislider': 'node_modules/nouislider',
'ng2-nouislider': 'node_modules/ng2-nouislider-prot',

Add to packages:

'nouislider': { main: 'distribute/nouislider.js', defaultExtension: 'js' },
'ng2-nouislider-prot': { 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.single"></nouislider>
</form>

Nouislider documentation

This component based on nouislider. Documentation about additional settings (passed in [config] @Input) can found here.

Start development

npm i
npm start
open http://localhost:8080

Contributors

Thanks goes to these wonderful people (emoji key):

| Tomasz Bak💻 👀 | Giacomo Mazzamuto💻 👀 | Ryan Morris💻 | Sven Flickinger💻 | Riku Kallio💻 | John Pinkster💻 | Oleg Romanovskyi💻 | | :---: | :---: | :---: | :---: | :---: | :---: | :---: | | ATeal💻 | Jérémy Leherpeur💻 | Matt Lewis💻 | anysite📖 | flmg💻 | SirWojtek📖 |

This project follows the all-contributors specification. Contributions of any kind are welcome!

License

MIT