diff --git a/README.md b/README.md
index 2c7573a..48a68d7 100644
--- a/README.md
+++ b/README.md
@@ -2,7 +2,7 @@
Angular2 nouislider directive
-See [demo](http://tb.github.io/ng2-nouislider/)
+See [demos](http://tb.github.io/ng2-nouislider/)
## Install
diff --git a/demo/app.html b/demo/app.html
index 9b9563d..d311a98 100644
--- a/demo/app.html
+++ b/demo/app.html
@@ -1,5 +1,5 @@
<div nouislider [min]="0" [max]="10" [step]="0.05" [(ngModel)]="someValue"></div>
@@ -14,7 +14,7 @@ Example 1
<div nouislider [connect]="true" [min]="0" [max]="15" [step]="1" [(ngModel)]="someRange"></div>
@@ -31,4 +31,29 @@ Example 2
-
\ No newline at end of file
+
+
+
+
+someRange2config: any = {
+ behaviour: 'drag',
+ connect: true,
+ margin: 1,
+ limit: 5, // NOTE: overwritten by [limit]="10"
+ range: {
+ min: 0,
+ max: 20
+ },
+ pips: {
+ mode: 'steps',
+ density: 5
+ }
+};
+
+<div nouislider [config]="someRange2config" [limit]="10" [(ngModel)]="someRange2"></div>
+
+someRange2: {{ someRange2 | json }}
+
+
diff --git a/demo/app.ts b/demo/app.ts
index 0830365..5e189ac 100644
--- a/demo/app.ts
+++ b/demo/app.ts
@@ -11,6 +11,21 @@ import {Nouislider} from 'ng2nouislider';
export class App {
public someValue: any = 5;
public someRange: any = [3,7];
+ public someRange2: any = [10,15];
+ public someRange2config: any = {
+ behaviour: 'drag',
+ connect: true,
+ margin: 1,
+ limit: 5,
+ range: {
+ min: 0,
+ max: 20
+ },
+ pips: {
+ mode: 'steps',
+ density: 5
+ }
+ };
changeSomeValue(value: number) {
this.someValue = this.someValue + value;
diff --git a/index.html b/index.html
index 51f3281..e2a6168 100644
--- a/index.html
+++ b/index.html
@@ -22,8 +22,8 @@
-
ng2-nouislider
-
Angular2 nouislider directive
+
ng2-nouislider demos
+
Back to GitHub
diff --git a/nouislider.d.ts b/nouislider.d.ts
index 21d5978..2d2696f 100644
--- a/nouislider.d.ts
+++ b/nouislider.d.ts
@@ -1,4 +1,4 @@
-import { OnInit, ElementRef, EventEmitter } from 'angular2/core';
+import { ElementRef, EventEmitter, OnInit } from 'angular2/core';
import { ControlValueAccessor } from 'angular2/common';
export declare function toValue(value: string[]): number | number[];
export declare class Nouislider implements ControlValueAccessor, OnInit {
@@ -7,10 +7,13 @@ export declare class Nouislider implements ControlValueAccessor, OnInit {
value: any;
onChange: any;
onTouched: any;
+ behaviour: string;
connect: boolean;
+ limit: number;
min: number;
max: number;
step: number;
+ config: any;
ngModelChange: EventEmitter
;
constructor(el: ElementRef);
ngOnInit(): void;
diff --git a/nouislider.js b/nouislider.js
index e9d70fd..3e836c2 100644
--- a/nouislider.js
+++ b/nouislider.js
@@ -1,4 +1,3 @@
-"use strict";
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
@@ -31,24 +30,21 @@ var Nouislider = (function () {
function Nouislider(el) {
this.onChange = Function.prototype;
this.onTouched = Function.prototype;
- this.connect = false;
- this.min = 0;
- this.max = 10;
- this.step = 1;
+ this.config = {};
this.ngModelChange = new core_1.EventEmitter();
this.el = el;
}
Nouislider.prototype.ngOnInit = function () {
var _this = this;
- this.slider = noUiSlider.create(this.el.nativeElement, {
- start: this.value || 0,
- step: this.step,
+ var inputsConfig = JSON.parse(JSON.stringify({
+ behaviour: this.behaviour,
connect: this.connect,
- range: {
- min: this.min,
- max: this.max
- }
- });
+ limit: this.limit,
+ start: this.value,
+ step: this.step,
+ range: this.config.range || { min: this.min, max: this.max }
+ }));
+ this.slider = noUiSlider.create(this.el.nativeElement, Object.assign(this.config, inputsConfig));
this.slider.on('set', function (value) {
_this.writeValue(toValue(value));
});
@@ -68,10 +64,18 @@ var Nouislider = (function () {
Nouislider.prototype.registerOnTouched = function (fn) {
this.onTouched = fn;
};
+ __decorate([
+ core_1.Input(),
+ __metadata('design:type', String)
+ ], Nouislider.prototype, "behaviour", void 0);
__decorate([
core_1.Input(),
__metadata('design:type', Boolean)
], Nouislider.prototype, "connect", void 0);
+ __decorate([
+ core_1.Input(),
+ __metadata('design:type', Number)
+ ], Nouislider.prototype, "limit", void 0);
__decorate([
core_1.Input(),
__metadata('design:type', Number)
@@ -84,6 +88,10 @@ var Nouislider = (function () {
core_1.Input(),
__metadata('design:type', Number)
], Nouislider.prototype, "step", void 0);
+ __decorate([
+ core_1.Input(),
+ __metadata('design:type', Object)
+ ], Nouislider.prototype, "config", void 0);
__decorate([
core_1.Output(),
__metadata('design:type', core_1.EventEmitter)
@@ -96,6 +104,6 @@ var Nouislider = (function () {
__metadata('design:paramtypes', [core_1.ElementRef])
], Nouislider);
return Nouislider;
-}());
+})();
exports.Nouislider = Nouislider;
//# sourceMappingURL=nouislider.js.map
\ No newline at end of file
diff --git a/nouislider.js.map b/nouislider.js.map
index f6ee166..a1970d0 100644
--- a/nouislider.js.map
+++ b/nouislider.js.map
@@ -1 +1 @@
-{"version":3,"file":"nouislider.js","sourceRoot":"","sources":["nouislider.ts"],"names":[],"mappings":"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"}
\ No newline at end of file
+{"version":3,"file":"nouislider.js","sourceRoot":"","sources":["nouislider.ts"],"names":["toValue","Nouislider","Nouislider.constructor","Nouislider.ngOnInit","Nouislider.writeValue","Nouislider.registerOnChange","Nouislider.registerOnTouched"],"mappings":"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"}
\ No newline at end of file
diff --git a/nouislider.ts b/nouislider.ts
index ba6eea8..ef18cd2 100644
--- a/nouislider.ts
+++ b/nouislider.ts
@@ -1,5 +1,14 @@
import * as noUiSlider from 'nouislider';
-import {Directive, OnInit, ElementRef, forwardRef, Provider, Input, Output, EventEmitter} from 'angular2/core';
+import {
+ Directive,
+ ElementRef,
+ EventEmitter,
+ forwardRef,
+ Input,
+ OnInit,
+ Output,
+ Provider
+} from 'angular2/core';
import {ControlValueAccessor} from 'angular2/common';
import {NG_VALUE_ACCESSOR} from 'angular2/src/common/forms/directives/control_value_accessor';
@@ -31,10 +40,13 @@ export class Nouislider implements ControlValueAccessor, OnInit {
public onChange: any = Function.prototype;
public onTouched: any = Function.prototype;
- @Input() connect: boolean = false;
- @Input() min: number = 0;
- @Input() max: number = 10;
- @Input() step: number = 1;
+ @Input() behaviour: string;
+ @Input() connect: boolean;
+ @Input() limit: number;
+ @Input() min: number;
+ @Input() max: number;
+ @Input() step: number;
+ @Input() config: any = {};
@Output() ngModelChange: EventEmitter = new EventEmitter();
public constructor(el:ElementRef) {
@@ -42,15 +54,19 @@ export class Nouislider implements ControlValueAccessor, OnInit {
}
ngOnInit(): void {
- this.slider = noUiSlider.create(this.el.nativeElement, {
- start: this.value || 0,
- step: this.step,
+ let inputsConfig = JSON.parse(JSON.stringify({
+ behaviour: this.behaviour,
connect: this.connect,
- range: {
- min: this.min,
- max: this.max
- }
- });
+ limit: this.limit,
+ start: this.value,
+ step: this.step,
+ range: this.config.range || {min: this.min, max: this.max}
+ }));
+
+ this.slider = noUiSlider.create(
+ this.el.nativeElement,
+ Object.assign(this.config, inputsConfig)
+ );
this.slider.on('set', (value) => {
this.writeValue(toValue(value));
diff --git a/package.json b/package.json
index e511319..b92d779 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "ng2-nouislider",
- "version": "0.2.1",
+ "version": "0.3.0",
"description": "Angular2 noUiSlider directive",
"main": "nouislider.js",
"typings": "nouislider.d.ts",