Fix slider positioning in IE

Author: ruhley

lib/scripts/directive.js

@@ -354,35 +354,48 @@
                 });
 
                 $scope.$watch('huePos', function(newValue) {
+                    var container = element[0].querySelector('.color-picker-hue');
                     var el = angular.element(element[0].querySelector('.color-picker-hue .color-picker-slider'));
+                    var bounding = container.getBoundingClientRect();
+
                     el.css({
-                        'top': newValue + '%',
+                        'top': (bounding.height * newValue / 100) + 'px',
                     });
                 });
 
                 $scope.$watch('opacityPos', function(newValue) {
+                    var container = element[0].querySelector('.color-picker-opacity');
                     var el = angular.element(element[0].querySelector('.color-picker-opacity .color-picker-slider'));
+                    var bounding = container.getBoundingClientRect();
+
                     el.css({
-                        'top': newValue + '%',
+                        'top': (bounding.height * newValue / 100) + 'px',
                     });
                 });
 
                 $scope.$watch('lightnessPos', function(newValue) {
+                    var container = element[0].querySelector('.color-picker-grid');
                     var el = angular.element(element[0].querySelector('.color-picker-grid .color-picker-picker'));
+                    var bounding = container.getBoundingClientRect();
+
                     el.css({
-                        'top': newValue + '%',
+                        'top': (bounding.height * newValue / 100) + 'px',
                     });
                 });
 
                 $scope.$watch('saturationPos', function(newValue) {
+                    var container = element[0].querySelector('.color-picker-grid');
                     var el = angular.element(element[0].querySelector('.color-picker-grid .color-picker-picker'));
+                    var bounding = container.getBoundingClientRect();
+
                     el.css({
-                        'left': newValue + '%',
+                        'left': (bounding.width * newValue / 100) + 'px',
                     });
                 });
 
                 $scope.$watch('grid', function(newValue) {
                     var el = angular.element(element[0].querySelector('.color-picker-grid'));
+
                     el.css({
                         'background-color': newValue,
                     });