From 9765df3ff1dec05d447d4e5009e6880239f38cf5 Mon Sep 17 00:00:00 2001 From: Ivan Nikolic Date: Sat, 16 Aug 2014 17:23:30 +0200 Subject: [PATCH 1/6] Replaced start and end with range to allow non linear sliders --- app/scripts/app.coffee | 15 ++++++++------- src/nouislider.js | 21 ++++++++++----------- src/nouislider.min.js | 2 +- 3 files changed, 19 insertions(+), 19 deletions(-) diff --git a/app/scripts/app.coffee b/app/scripts/app.coffee index 9f913ca..fd5a5ec 100644 --- a/app/scripts/app.coffee +++ b/app/scripts/app.coffee @@ -4,9 +4,8 @@ angular.module('nouislider', []) .directive "slider", () -> restrict: "A" scope: - start: "@" + range: "=" step: "@" - end: "@" callback: "@" margin: "@" ngModel: "=" @@ -22,14 +21,16 @@ angular.module('nouislider', []) fromParsed = null toParsed = null - slider.noUiSlider + sliderConfig = start: [scope.ngFrom or scope.start, scope.ngTo or scope.end] step: parseFloat(scope.step or 1) connect: true - margin: parseFloat(scope.margin or 0) - range: - min: [parseFloat scope.start] - max: [parseFloat scope.end] + range: scope.range + + if scope.margin + sliderConfig['margin'] = scope.margin + + slider.noUiSlider(sliderConfig) slider.on callback, -> diff --git a/src/nouislider.js b/src/nouislider.js index d9afa6c..73cd3c0 100644 --- a/src/nouislider.js +++ b/src/nouislider.js @@ -3,9 +3,8 @@ angular.module('nouislider', []).directive('slider', function () { return { restrict: 'A', scope: { - start: '@', + range: '=', step: '@', - end: '@', callback: '@', margin: '@', ngModel: '=', @@ -13,25 +12,25 @@ angular.module('nouislider', []).directive('slider', function () { ngTo: '=' }, link: function (scope, element, attrs) { - var callback, fromParsed, parsedValue, slider, toParsed; + var callback, fromParsed, parsedValue, slider, sliderConfig, toParsed; slider = $(element); callback = scope.callback ? scope.callback : 'slide'; if (scope.ngFrom != null && scope.ngTo != null) { fromParsed = null; toParsed = null; - slider.noUiSlider({ + sliderConfig = { start: [ scope.ngFrom || scope.start, scope.ngTo || scope.end ], - step: parseFloat(scope.step || 1), connect: true, - margin: parseFloat(scope.margin || 0), - range: { - min: [parseFloat(scope.start)], - max: [parseFloat(scope.end)] - } - }); + step: parseFloat(scope.step || 1), + range: scope.range + }; + if (scope.margin) { + sliderConfig['margin'] = scope.margin; + } + slider.noUiSlider(sliderConfig); slider.on(callback, function () { var from, to, _ref; _ref = slider.val(), from = _ref[0], to = _ref[1]; diff --git a/src/nouislider.min.js b/src/nouislider.min.js index 19db5ca..79448fc 100644 --- a/src/nouislider.min.js +++ b/src/nouislider.min.js @@ -1 +1 @@ -"use strict";angular.module("nouislider",[]).directive("slider",function(){return{restrict:"A",scope:{start:"@",step:"@",end:"@",callback:"@",margin:"@",ngModel:"=",ngFrom:"=",ngTo:"="},link:function(a,b){var c,d,e,f,g;return f=$(b),c=a.callback?a.callback:"slide",null!=a.ngFrom&&null!=a.ngTo?(d=null,g=null,f.noUiSlider({start:[a.ngFrom||a.start,a.ngTo||a.end],step:parseFloat(a.step||1),connect:!0,margin:parseFloat(a.margin||0),range:{min:[parseFloat(a.start)],max:[parseFloat(a.end)]}}),f.on(c,function(){var b,c,e;return e=f.val(),b=e[0],c=e[1],d=parseFloat(b),g=parseFloat(c),a.$apply(function(){return a.ngFrom=d,a.ngTo=g})}),a.$watch("ngFrom",function(a){return a!==d?f.val([a,null]):void 0}),a.$watch("ngTo",function(a){return a!==g?f.val([null,a]):void 0})):(e=null,f.noUiSlider({start:[a.ngModel||a.start],step:parseFloat(a.step||1),range:{min:[parseFloat(a.start)],max:[parseFloat(a.end)]}}),f.on(c,function(){return e=parseFloat(f.val()),a.$apply(function(){return a.ngModel=e})}),a.$watch("ngModel",function(a){return a!==e?f.val(a):void 0}))}}}); \ No newline at end of file +"use strict";angular.module("nouislider",[]).directive("slider",function(){return{restrict:"A",scope:{range:"=",step:"@",callback:"@",margin:"@",ngModel:"=",ngFrom:"=",ngTo:"="},link:function(a,b){var c,d,e,f,g,h;return f=$(b),c=a.callback?a.callback:"slide",null!=a.ngFrom&&null!=a.ngTo?(d=null,h=null,g={start:[a.ngFrom||a.start,a.ngTo||a.end],connect:!0,step:parseFloat(a.step||1),range:a.range},a.margin&&(g.margin=a.margin),f.noUiSlider(g),f.on(c,function(){var b,c,e;return e=f.val(),b=e[0],c=e[1],d=parseFloat(b),h=parseFloat(c),a.$apply(function(){return a.ngFrom=d,a.ngTo=h})}),a.$watch("ngFrom",function(a){return a!==d?f.val([a,null]):void 0}),a.$watch("ngTo",function(a){return a!==h?f.val([null,a]):void 0})):(e=null,f.noUiSlider({start:[a.ngModel||a.start],step:parseFloat(a.step||1),range:{min:[parseFloat(a.start)],max:[parseFloat(a.end)]}}),f.on(c,function(){return e=parseFloat(f.val()),a.$apply(function(){return a.ngModel=e})}),a.$watch("ngModel",function(a){return a!==e?f.val(a):void 0}))}}}); \ No newline at end of file From 07e982fec41b44a0c33483c7cc948f1e2c370534 Mon Sep 17 00:00:00 2001 From: Ivan Nikolic Date: Sat, 16 Aug 2014 17:29:04 +0200 Subject: [PATCH 2/6] Updated readme. --- README.md | 24 ++++++++++++++++++++---- 1 file changed, 20 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index a88878c..4af34f2 100644 --- a/README.md +++ b/README.md @@ -23,18 +23,34 @@ Simple angular directive for jquery [nouislider](http://refreshless.com/nouislid angular.module('MyApp', ['nouislider']); ``` +- Define a the slider model in your controller. + +```js +$scope.test = { + range: { + min: 0, + '50%': [10,10], + max: 100 + }, + selected: { + min: 3, + max: 6 + } +}; +``` + - Add a `slider` attribute to your `
` tag: ```html -
-
+
+
``` - If you wanna change [callback function](http://refreshless.com/nouislider/slider-events), use `callback` attribute. (`slide` by default.) ```html -
-
+
+
``` That's it! From 293be3dcddc042ea8f1ee95fe627ffd7c32c6c82 Mon Sep 17 00:00:00 2001 From: Ivan Nikolic Date: Sat, 16 Aug 2014 17:30:36 +0200 Subject: [PATCH 3/6] Small fix in readme. --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 4af34f2..e4dfd67 100644 --- a/README.md +++ b/README.md @@ -33,8 +33,8 @@ $scope.test = { max: 100 }, selected: { - min: 3, - max: 6 + from: 3, + to: 6 } }; ``` From dfe8aad362cbde80c8e5bc39bdf9414682477839 Mon Sep 17 00:00:00 2001 From: Ivan Nikolic Date: Sat, 16 Aug 2014 17:55:58 +0200 Subject: [PATCH 4/6] Update version --- bower.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/bower.json b/bower.json index c1edf2f..53d45bd 100644 --- a/bower.json +++ b/bower.json @@ -1,7 +1,7 @@ { "name": "angular-nouislider", "homepage": "http://vasyabigi.github.io/angular-nouislider/", - "version": "0.3.1", + "version": "0.3.2", "main": "src/nouislider.js", "ignore": [ "app" From fd5063a85da0cee4b35bb6a905085130dd69dd73 Mon Sep 17 00:00:00 2001 From: Ivan Nikolic Date: Sat, 25 Oct 2014 17:37:09 +0200 Subject: [PATCH 5/6] Fix single case and add connect option --- app/scripts/app.coffee | 17 ++++++++++------- src/nouislider.js | 27 ++++++++++++++++----------- src/nouislider.min.js | 2 +- 3 files changed, 27 insertions(+), 19 deletions(-) diff --git a/app/scripts/app.coffee b/app/scripts/app.coffee index fd5a5ec..7678d64 100644 --- a/app/scripts/app.coffee +++ b/app/scripts/app.coffee @@ -6,6 +6,7 @@ angular.module('nouislider', []) scope: range: "=" step: "@" + connect: "@" callback: "@" margin: "@" ngModel: "=" @@ -22,7 +23,7 @@ angular.module('nouislider', []) toParsed = null sliderConfig = - start: [scope.ngFrom or scope.start, scope.ngTo or scope.end] + start: [scope.ngFrom or scope.range.min, scope.ngTo or scope.range.max] step: parseFloat(scope.step or 1) connect: true range: scope.range @@ -55,13 +56,15 @@ angular.module('nouislider', []) ) else parsedValue = null - - slider.noUiSlider - start: [scope.ngModel or scope.start], + sliderConfig = + start: [scope.ngModel or scope.range.min] step: parseFloat(scope.step or 1) - range: - min: [parseFloat scope.start] - max: [parseFloat scope.end] + range: scope.range + + if scope.connect + sliderConfig['connect'] = scope.connect + + slider.noUiSlider(sliderConfig) slider.on callback, -> parsedValue = parseFloat slider.val() diff --git a/src/nouislider.js b/src/nouislider.js index 73cd3c0..1a926bb 100644 --- a/src/nouislider.js +++ b/src/nouislider.js @@ -5,6 +5,7 @@ angular.module('nouislider', []).directive('slider', function () { scope: { range: '=', step: '@', + connect: '@', callback: '@', margin: '@', ngModel: '=', @@ -20,11 +21,11 @@ angular.module('nouislider', []).directive('slider', function () { toParsed = null; sliderConfig = { start: [ - scope.ngFrom || scope.start, - scope.ngTo || scope.end + scope.ngFrom || scope.range.min, + scope.ngTo || scope.range.max ], - connect: true, step: parseFloat(scope.step || 1), + connect: true, range: scope.range }; if (scope.margin) { @@ -59,14 +60,16 @@ angular.module('nouislider', []).directive('slider', function () { }); } else { parsedValue = null; - slider.noUiSlider({ - start: [scope.ngModel || scope.start], + console.log(scope.range.min); + sliderConfig = { + start: [scope.ngModel || scope.range.min], step: parseFloat(scope.step || 1), - range: { - min: [parseFloat(scope.start)], - max: [parseFloat(scope.end)] - } - }); + range: scope.range + }; + if (scope.connect) { + sliderConfig['connect'] = scope.connect; + } + slider.noUiSlider(sliderConfig); slider.on(callback, function () { parsedValue = parseFloat(slider.val()); return scope.$apply(function () { @@ -81,4 +84,6 @@ angular.module('nouislider', []).directive('slider', function () { } } }; -}); \ No newline at end of file +}); /* +//@ sourceMappingURL=app.js.map +*/ \ No newline at end of file diff --git a/src/nouislider.min.js b/src/nouislider.min.js index 79448fc..039fc56 100644 --- a/src/nouislider.min.js +++ b/src/nouislider.min.js @@ -1 +1 @@ -"use strict";angular.module("nouislider",[]).directive("slider",function(){return{restrict:"A",scope:{range:"=",step:"@",callback:"@",margin:"@",ngModel:"=",ngFrom:"=",ngTo:"="},link:function(a,b){var c,d,e,f,g,h;return f=$(b),c=a.callback?a.callback:"slide",null!=a.ngFrom&&null!=a.ngTo?(d=null,h=null,g={start:[a.ngFrom||a.start,a.ngTo||a.end],connect:!0,step:parseFloat(a.step||1),range:a.range},a.margin&&(g.margin=a.margin),f.noUiSlider(g),f.on(c,function(){var b,c,e;return e=f.val(),b=e[0],c=e[1],d=parseFloat(b),h=parseFloat(c),a.$apply(function(){return a.ngFrom=d,a.ngTo=h})}),a.$watch("ngFrom",function(a){return a!==d?f.val([a,null]):void 0}),a.$watch("ngTo",function(a){return a!==h?f.val([null,a]):void 0})):(e=null,f.noUiSlider({start:[a.ngModel||a.start],step:parseFloat(a.step||1),range:{min:[parseFloat(a.start)],max:[parseFloat(a.end)]}}),f.on(c,function(){return e=parseFloat(f.val()),a.$apply(function(){return a.ngModel=e})}),a.$watch("ngModel",function(a){return a!==e?f.val(a):void 0}))}}}); \ No newline at end of file +"use strict";angular.module("nouislider",[]).directive("slider",function(){return{restrict:"A",scope:{range:"=",step:"@",connect:"@",callback:"@",margin:"@",ngModel:"=",ngFrom:"=",ngTo:"="},link:function(a,b){var c,d,e,f,g,h;return f=$(b),c=a.callback?a.callback:"slide",null!=a.ngFrom&&null!=a.ngTo?(d=null,h=null,g={start:[a.ngFrom||a.range.min,a.ngTo||a.range.max],step:parseFloat(a.step||1),connect:!0,range:a.range},a.margin&&(g.margin=a.margin),f.noUiSlider(g),f.on(c,function(){var b,c,e;return e=f.val(),b=e[0],c=e[1],d=parseFloat(b),h=parseFloat(c),a.$apply(function(){return a.ngFrom=d,a.ngTo=h})}),a.$watch("ngFrom",function(a){return a!==d?f.val([a,null]):void 0}),a.$watch("ngTo",function(a){return a!==h?f.val([null,a]):void 0})):(e=null,console.log(a.range.min),g={start:[a.ngModel||a.range.min],step:parseFloat(a.step||1),range:a.range},a.connect&&(g.connect=a.connect),f.noUiSlider(g),f.on(c,function(){return e=parseFloat(f.val()),a.$apply(function(){return a.ngModel=e})}),a.$watch("ngModel",function(a){return a!==e?f.val(a):void 0}))}}}); \ No newline at end of file From 092bbabf0b0bc0bf18af64a78f8b192428ccbcaf Mon Sep 17 00:00:00 2001 From: Ivan Nikolic Date: Sat, 25 Oct 2014 17:47:12 +0200 Subject: [PATCH 6/6] Remove log --- src/nouislider.js | 1 - src/nouislider.min.js | 2 +- 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/src/nouislider.js b/src/nouislider.js index 1a926bb..6af26f0 100644 --- a/src/nouislider.js +++ b/src/nouislider.js @@ -60,7 +60,6 @@ angular.module('nouislider', []).directive('slider', function () { }); } else { parsedValue = null; - console.log(scope.range.min); sliderConfig = { start: [scope.ngModel || scope.range.min], step: parseFloat(scope.step || 1), diff --git a/src/nouislider.min.js b/src/nouislider.min.js index 039fc56..3337212 100644 --- a/src/nouislider.min.js +++ b/src/nouislider.min.js @@ -1 +1 @@ -"use strict";angular.module("nouislider",[]).directive("slider",function(){return{restrict:"A",scope:{range:"=",step:"@",connect:"@",callback:"@",margin:"@",ngModel:"=",ngFrom:"=",ngTo:"="},link:function(a,b){var c,d,e,f,g,h;return f=$(b),c=a.callback?a.callback:"slide",null!=a.ngFrom&&null!=a.ngTo?(d=null,h=null,g={start:[a.ngFrom||a.range.min,a.ngTo||a.range.max],step:parseFloat(a.step||1),connect:!0,range:a.range},a.margin&&(g.margin=a.margin),f.noUiSlider(g),f.on(c,function(){var b,c,e;return e=f.val(),b=e[0],c=e[1],d=parseFloat(b),h=parseFloat(c),a.$apply(function(){return a.ngFrom=d,a.ngTo=h})}),a.$watch("ngFrom",function(a){return a!==d?f.val([a,null]):void 0}),a.$watch("ngTo",function(a){return a!==h?f.val([null,a]):void 0})):(e=null,console.log(a.range.min),g={start:[a.ngModel||a.range.min],step:parseFloat(a.step||1),range:a.range},a.connect&&(g.connect=a.connect),f.noUiSlider(g),f.on(c,function(){return e=parseFloat(f.val()),a.$apply(function(){return a.ngModel=e})}),a.$watch("ngModel",function(a){return a!==e?f.val(a):void 0}))}}}); \ No newline at end of file +"use strict";angular.module("nouislider",[]).directive("slider",function(){return{restrict:"A",scope:{range:"=",step:"@",connect:"@",callback:"@",margin:"@",ngModel:"=",ngFrom:"=",ngTo:"="},link:function(a,b){var c,d,e,f,g,h;return f=$(b),c=a.callback?a.callback:"slide",null!=a.ngFrom&&null!=a.ngTo?(d=null,h=null,g={start:[a.ngFrom||a.range.min,a.ngTo||a.range.max],step:parseFloat(a.step||1),connect:!0,range:a.range},a.margin&&(g.margin=a.margin),f.noUiSlider(g),f.on(c,function(){var b,c,e;return e=f.val(),b=e[0],c=e[1],d=parseFloat(b),h=parseFloat(c),a.$apply(function(){return a.ngFrom=d,a.ngTo=h})}),a.$watch("ngFrom",function(a){return a!==d?f.val([a,null]):void 0}),a.$watch("ngTo",function(a){return a!==h?f.val([null,a]):void 0})):(e=null,g={start:[a.ngModel||a.range.min],step:parseFloat(a.step||1),range:a.range},a.connect&&(g.connect=a.connect),f.noUiSlider(g),f.on(c,function(){return e=parseFloat(f.val()),a.$apply(function(){return a.ngModel=e})}),a.$watch("ngModel",function(a){return a!==e?f.val(a):void 0}))}}}); \ No newline at end of file