Replace start and end with range to allow non linear sliders

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: {
+        from: 3,
+        to: 6
+    }
+};
+```
+
 - Add a `slider` attribute to your `<div>` tag:
 
 ```html
-<div slider ng-model="test.single" start=1 end=10></div>
-<div slider ng-from="test.from" ng-to="test.to" start=0 end=100 step=5></div>
+<div slider ng-model="test.single" range="test.range"></div>
+<div slider ng-from="test.selected.from" ng-to="test.selected.to" range="test.range" step=5></div>
 ```
 
 - If you wanna change [callback function](http://refreshless.com/nouislider/slider-events), use `callback` attribute. (`slide` by default.)
 
 ```html
-<div slider ng-model="test.single" start=1 end=10 callback='change'></div>
-<div slider ng-from="test.from" ng-to="test.to" start=0 end=100 step=5 callback='set'></div>
+<div slider ng-model="test.single" range="test.range" callback='change'></div>
+<div slider ng-from="test.from" ng-to="test.to" range="test.range" step=5 callback='set'></div>
 ```
 
 That's it!

app/scripts/app.coffee

@@ -4,9 +4,9 @@ angular.module('nouislider', [])
   .directive "slider", () ->
     restrict: "A"
     scope:
-      start: "@"
+      range: "="
       step: "@"
-      end: "@"
+      connect: "@"
       callback: "@"
       margin: "@"
       ngModel: "="
@@ -22,14 +22,16 @@ angular.module('nouislider', [])
         fromParsed = null
         toParsed = null
 
-        slider.noUiSlider
-          start: [scope.ngFrom or scope.start, scope.ngTo or scope.end]
+        sliderConfig =
+          start: [scope.ngFrom or scope.range.min, scope.ngTo or scope.range.max]
           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, ->
@@ -54,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()

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"