tb / Ng2 Nouislider
Licence: mit
Angular2 noUiSlider directive
Stars: ✭ 181
Programming Languages
typescript
32286 projects
Projects that are alternatives of or similar to Ng2 Nouislider
Ngx Admin
Customizable admin dashboard template based on Angular 10+
Stars: ✭ 23,286 (+12765.19%)
Mutual labels: ng2, angular2
Angular Google Maps
Angular 2+ Google Maps Components
Stars: ✭ 1,982 (+995.03%)
Mutual labels: ng2, angular2
Ngx Echarts
An angular (ver >= 2.x) directive for ECharts (ver >= 3.x)
Stars: ✭ 820 (+353.04%)
Mutual labels: ng2, angular2
ngx-magicsearch
Magic Search/Faceted Search Library for Angular 2
Stars: ✭ 19 (-89.5%)
Mutual labels: angular2, ng2
Ng2 Konva
Angular & Canvas - JavaScript library for drawing complex canvas graphics using Angular.
Stars: ✭ 78 (-56.91%)
Mutual labels: ng2, angular2
Angular
UI-Router for Angular: State-based routing for Angular (v2+)
Stars: ✭ 287 (+58.56%)
Mutual labels: ng2, angular2
Ng2 Ace
A basic ace editor directive for angular 2.
Stars: ✭ 33 (-81.77%)
Mutual labels: ng2, angular2
Ng2 Breadcrumbs
A breadcrumb service for the Angular 7 router
Stars: ✭ 61 (-66.3%)
Mutual labels: ng2, angular2
Ngautocomplete
Light-weight autocomplete component for Angular.
Stars: ✭ 52 (-71.27%)
Mutual labels: ng2, angular2
angular2-cookie-law
Angular2+ component that provides a banner to inform users about cookie law
Stars: ✭ 38 (-79.01%)
Mutual labels: angular2, ng2
Ngx Date Fns
⏳ date-fns pipes for Angular 2.0 and above ⏳
Stars: ✭ 135 (-25.41%)
Mutual labels: ng2, angular2
ng2-fused
FuseBox plugins and utilities for building Angular2 applications.
Stars: ✭ 13 (-92.82%)
Mutual labels: angular2, ng2
Cc
一个基于angular5.0.0+ng-bootstrap1.0.0-beta.8+bootstrap4.0.0-beta.2+scss的后台管理系统界面(没基础的同学请先自学基础,谢谢!)
Stars: ✭ 416 (+129.83%)
Mutual labels: ng2, angular2
Angular2 Carousel
An lightweight , touchable and responsive library to create a carousel for angular 2 / 4 / 5
Stars: ✭ 26 (-85.64%)
Mutual labels: ng2, angular2
ng2-STOMP-Over-WebSocket
STOMP Over WebSocket service for angular2
Stars: ✭ 35 (-80.66%)
Mutual labels: angular2, ng2
ng-seed
Simple Angular seed project with commonly used features.
Stars: ✭ 12 (-93.37%)
Mutual labels: angular2, ng2
Ng2 Sweetalert2
A sweetalert2 service for angular2.
Stars: ✭ 49 (-72.93%)
Mutual labels: ng2, angular2
Ng2 Smart Table
Angular Smart Data Table component
Stars: ✭ 1,590 (+778.45%)
Mutual labels: ng2, angular2
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.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
npm i
npm start
open http://localhost:8080
Contributors
Thanks goes to these wonderful people (emoji key):
👀 | 👀 |
Ryan Morris 💻 |
Sven Flickinger 💻 |
Riku Kallio 💻 |
John Pinkster 💻 |
Oleg Romanovskyi 💻 |
---|---|---|---|---|---|---|
ATeal 💻 |
Jérémy Leherpeur 💻 |
Matt Lewis 💻 |
anysite 📖 |
flmg 💻 |
SirWojtek 📖 |
Rubén Trujillo 💻 |
💡 |
Jeremy Fry 💻 |
Tadeusz 💻 |
Philippe Roy 💻 |
This project follows the all-contributors specification. Contributions of any kind are welcome!
License
MIT
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].