ng2-nouislider

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):

| Tomasz Bak💻 👀 | Giacomo Mazzamuto💻 👀 | Ryan Morris💻 | Sven Flickinger💻 | Riku Kallio💻 | John Pinkster💻 | Oleg Romanovskyi💻 | | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | | ATeal💻 | Jérémy Leherpeur💻 | Matt Lewis💻 | anysite📖 | flmg💻 | SirWojtek📖 | Rubén Trujillo💻 | | Olena Horal💻 💡 | Jeremy Fry💻 | Tadeusz💻 | Philippe Roy💻 |

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

License

MIT