From 16d7cec39f1cb72cfc4a4ad3c6621eee34b58b53 Mon Sep 17 00:00:00 2001
From: Dennis Wilson <dennis.wilson@abakia.de>
Date: Mon, 30 Jun 2014 17:12:19 +0200
Subject: [PATCH] dynamically adds or removes handles if model changes

---
 src/coffeescript/multirange-slider.coffee | 73 +++++++++++++----------
 1 file changed, 42 insertions(+), 31 deletions(-)

diff --git a/src/coffeescript/multirange-slider.coffee b/src/coffeescript/multirange-slider.coffee
index 1b45352..77782f8 100644
--- a/src/coffeescript/multirange-slider.coffee
+++ b/src/coffeescript/multirange-slider.coffee
@@ -54,37 +54,48 @@ angular.module("multirangeSlider").directive("slider", ($document, $timeout)->
           left: x + "%"
           top: "-" + handle.prop("clientHeight")/2 + "px"
 
-    for mv,i in scope.model
-      do (mv, i)->
-        return if i == scope.model.length-1
-        handle = angular.element('<div class="slider-handle"></div>')
-        handle.css("position", "absolute")
-        handles.push(handle)
-        element.append(handle)
-
-        startX = 0
-        startPleft = startPright = 0
-        handle.on "mousedown", (event) ->
-          mousemove = (event) => scope.$apply ()->
-            dp = (event.screenX - startX) / element.prop("clientWidth") * pTotal
-            return if dp < -startPleft or dp > startPright
-            setP(i, startPleft+dp)
-            setP(i+1, startPright-dp)
-            updatePositions()
-
-          mouseup = ->
-            $document.unbind "mousemove", mousemove
-            $document.unbind "mouseup", mouseup
-
-          # Prevent default dragging of selected content
-          event.preventDefault()
-          startX = event.screenX
-          startPleft = getP(i)
-          startPright = getP(i+1)
-          $document.on "mousemove", mousemove
-          $document.on "mouseup", mouseup
-
-    scope.$watch "model", updatePositions, true
+    renderHandles = (model) ->
+      for mv,i in model
+        do (mv, i)->
+          return if i == model.length-1
+          handle = angular.element('<div class="slider-handle"></div>')
+          handle.css("position", "absolute")
+          handles.push(handle)
+          element.append(handle)
+
+          startX = 0
+          startPleft = startPright = 0
+          handle.on "mousedown", (event) ->
+            mousemove = (event) => scope.$apply ()->
+              dp = (event.screenX - startX) / element.prop("clientWidth") * pTotal
+              return if dp < -startPleft or dp > startPright
+              setP(i, startPleft+dp)
+              setP(i+1, startPright-dp)
+              updatePositions()
+
+            mouseup = ->
+              $document.unbind "mousemove", mousemove
+              $document.unbind "mouseup", mouseup
+
+            # Prevent default dragging of selected content
+            event.preventDefault()
+            startX = event.screenX
+            startPleft = getP(i)
+            startPright = getP(i+1)
+            $document.on "mousemove", mousemove
+            $document.on "mouseup", mouseup
+
+    onModelChange = (changedModel, model) ->
+      if changedModel.length != model.length
+        handles = []
+        element.children().remove()
+        renderHandles(changedModel)
+        
+      updatePositions()
+
+
+    renderHandles scope.model
+    scope.$watch "model", onModelChange, true
 )
 
 angular.module("multirangeSlider").controller("Ctrl", ($scope)->