Home

Awesome

ng2-nouislider

CI npm version Downloads All Contributors

Angular2 nouislider component

See demos

Install

Requires Angular 14 or higher

npm i nouislider ng2-nouislider

Import

import { NouisliderModule } from 'ng2-nouislider';

Styles

@import "nouislider/dist/nouislider.css";

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 is based on nouislider. Documentation about additional settings (passed in [config] @Input) can be found here.

Start development

corepack enable
pnpm i
pnpm start

Contributors

Thanks goes to these wonderful people (emoji key):

<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
<img src="https://avatars2.githubusercontent.com/u/71683?v=4" width="100px;"/><br /><sub>Tomasz Bak</sub><br />💻 👀<img src="https://avatars2.githubusercontent.com/u/18688794?v=4" width="100px;"/><br /><sub>Giacomo Mazzamuto</sub><br />💻 👀<img src="https://avatars3.githubusercontent.com/u/7102450?v=4" width="100px;"/><br /><sub>Ryan Morris</sub><br />💻<img src="https://avatars2.githubusercontent.com/u/2569015?v=4" width="100px;"/><br /><sub>Sven Flickinger</sub><br />💻<img src="https://avatars0.githubusercontent.com/u/8615481?v=4" width="100px;"/><br /><sub>Riku Kallio</sub><br />💻<img src="https://avatars3.githubusercontent.com/u/5350861?v=4" width="100px;"/><br /><sub>John Pinkster</sub><br />💻<img src="https://avatars1.githubusercontent.com/u/477298?v=4" width="100px;"/><br /><sub>Oleg Romanovskyi</sub><br />💻
<img src="https://avatars1.githubusercontent.com/u/5629145?v=4" width="100px;"/><br /><sub>ATeal</sub><br />💻<img src="https://avatars1.githubusercontent.com/u/2158235?v=4" width="100px;"/><br /><sub>Jérémy Leherpeur</sub><br />💻<img src="https://avatars1.githubusercontent.com/u/6425649?v=4" width="100px;"/><br /><sub>Matt Lewis</sub><br />💻<img src="https://avatars1.githubusercontent.com/u/5819263?v=4" width="100px;"/><br /><sub>anysite</sub><br />📖<img src="https://avatars1.githubusercontent.com/u/3389712?v=4" width="100px;"/><br /><sub>flmg</sub><br />💻<img src="https://avatars2.githubusercontent.com/u/8425921?v=4" width="100px;"/><br /><sub>SirWojtek</sub><br />📖<img src="https://avatars1.githubusercontent.com/u/596580?v=4" width="100px;"/><br /><sub>Rubén Trujillo</sub><br />💻
<img src="https://avatars1.githubusercontent.com/u/12625792?v=4" width="100px;"/><br /><sub>Olena Horal</sub><br />💻 💡<img src="https://avatars1.githubusercontent.com/u/316541?v=4" width="100px;"/><br /><sub>Jeremy Fry</sub><br />💻<img src="https://avatars0.githubusercontent.com/u/9978922?v=4" width="100px;"/><br /><sub>Tadeusz</sub><br />💻<img src="https://avatars0.githubusercontent.com/u/2358714?v=4" width="100px;"/><br /><sub>Philippe Roy</sub><br />💻
<!-- ALL-CONTRIBUTORS-LIST:END -->

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

License

MIT