From 1f6b5877abb62168b9c1621581336513954cc2ef Mon Sep 17 00:00:00 2001
From: Aleksandar Ivanov <smichess@gmail.com>
Date: Fri, 7 Oct 2016 16:57:55 +0300
Subject: [PATCH 1/2] color change support

adding support for custom background color depending on value
intended usage: <slider max="5" min="1" step="1" ng-model="model" set-color="getColor"></slider>
function getColor(value){
    if(value > 1)return 'red';
    if(value > 2)return 'orange';
    return 'green';
}
---
 slider.js | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/slider.js b/slider.js
index 02bc0ab..d0139d8 100644
--- a/slider.js
+++ b/slider.js
@@ -10,6 +10,7 @@
 
 angular.module('ui.bootstrap-slider', [])
     .directive('slider', ['$parse', '$timeout', '$rootScope', function ($parse, $timeout, $rootScope) {
+        var sliderCount = 0;
         return {
             restrict: 'AE',
             replace: true,
@@ -31,6 +32,7 @@ angular.module('ui.bootstrap-slider', [])
                 scale: '=',
                 focus: '=',
                 rangeHighlights: '=',
+                setColor: '=',
                 formatter: '&',
                 onStartSlide: '&',
                 onStopSlide: '&',
@@ -38,7 +40,7 @@ angular.module('ui.bootstrap-slider', [])
             },
             link: function ($scope, element, attrs, ngModelCtrl, $compile) {
                 var ngModelDeregisterFn, ngDisabledDeregisterFn;
-
+                
                 var slider = initSlider();
 
                 function initSlider() {
@@ -60,7 +62,12 @@ angular.module('ui.bootstrap-slider', [])
                         return (angular.isString(value) && value.indexOf("[") === 0) ? angular.fromJson(value) : value;
                     }
 
-                    setOption('id', $scope.sliderid);
+                    function updateColor(value){
+                        if(options.setColor != undefined)
+                        $('#'+options.sliderid+" .slider-selection").css({'background-color':options.setColor(value), 'background-image':'none'});
+                    }
+                    
+                    setOption('id', $scope.sliderid, 'slider-id-' + sliderCount++);
                     setOption('orientation', attrs.orientation, 'horizontal');
                     setOption('selection', attrs.selection, 'before');
                     setOption('handle', attrs.handle, 'round');
@@ -74,7 +81,8 @@ angular.module('ui.bootstrap-slider', [])
                     setOption('rangeHighlights', $scope.rangeHighlights);
                     setOption('scale', $scope.scale, 'linear');
                     setOption('focus', $scope.focus);
-
+                    setOption('setColor', $scope.setColor);
+                    
                     setFloatOption('min', $scope.min, 0);
                     setFloatOption('max', $scope.max, 10);
                     setFloatOption('step', $scope.step, 1);
@@ -161,6 +169,7 @@ angular.module('ui.bootstrap-slider', [])
                         });
                     });
                     slider.on('change', function (ev) {
+                        updateColor(ev.newValue);
                         ngModelCtrl.$setViewValue(ev.newValue);
                     });
 

From 66b4238cf2cd19de8bcabde304d92db94fa47ad5 Mon Sep 17 00:00:00 2001
From: Aleksandar Ivanov <smichess@gmail.com>
Date: Fri, 7 Oct 2016 17:03:59 +0300
Subject: [PATCH 2/2] fix my mess

---
 slider.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/slider.js b/slider.js
index d0139d8..3f085d0 100644
--- a/slider.js
+++ b/slider.js
@@ -64,7 +64,7 @@ angular.module('ui.bootstrap-slider', [])
 
                     function updateColor(value){
                         if(options.setColor != undefined)
-                        $('#'+options.sliderid+" .slider-selection").css({'background-color':options.setColor(value), 'background-image':'none'});
+                        $('#'+options.id+" .slider-selection").css({'background-color':options.setColor(value), 'background-image':'none'});
                     }
                     
                     setOption('id', $scope.sliderid, 'slider-id-' + sliderCount++);
@@ -169,7 +169,6 @@ angular.module('ui.bootstrap-slider', [])
                         });
                     });
                     slider.on('change', function (ev) {
-                        updateColor(ev.newValue);
                         ngModelCtrl.$setViewValue(ev.newValue);
                     });
 
@@ -214,6 +213,7 @@ angular.module('ui.bootstrap-slider', [])
                         }else{
                             slider.setValue(parseFloat(value));
                         }
+                        updateColor(value);
                         slider.relayout();
                     }, true);