All Projects → tb → Ng2 Nouislider

tb / Ng2 Nouislider

Licence: mit
Angular2 noUiSlider directive

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
ng-elm
Write Angular components in Elm.
Stars: ✭ 41 (-77.35%)
Mutual labels:  angular2, ng2
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
ng2-gravatar
Angular2 gravatar directive
Stars: ✭ 21 (-88.4%)
Mutual labels:  angular2, ng2
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

Build Status npm version Downloads All Contributors

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].