Merge pull request #124 from e-cloud/dev#118

Add umd support. Extract template in its own file.

.gitignore

 node_modules/
 .idea/
 bower_components/
+temp/
\ No newline at end of file

Gruntfile.js

@@ -15,7 +15,7 @@ module.exports = function (grunt)
       },
 
       slider: {
-        src: ['rzslider.less'],
+        src: ['src/rzslider.less'],
         dest: 'dist/rzslider.css'
       },
 
@@ -37,18 +37,79 @@ module.exports = function (grunt)
       rzslider: {
         files: {
           'dist/rzslider.min.js': [
-            'rzslider.js'
+            'dist/rzslider.js'
           ]
         }
       }
+    },
+
+    ngtemplates:  {
+      app:        {
+        src:      'src/**.html',
+        dest:     'temp/templates.js',
+        options:  {
+          htmlmin: {
+            collapseBooleanAttributes:      true,
+            collapseWhitespace:             true,
+            removeAttributeQuotes:          true,
+            removeComments:                 true, // Only if you don't use comment directives!
+            removeEmptyAttributes:          true,
+            removeRedundantAttributes:      true,
+            removeScriptTypeAttributes:     true,
+            removeStyleLinkTypeAttributes:  true
+          },
+          module: 'rzModule',
+          url: function(url) {
+	        return url.replace('src/', '');
+          },
+	      bootstrap: function (module, script) {
+		    return 'module.run(function($templateCache) {\n' + script + '\n});';
+	      }
+        }
+      }
+    },
+
+    replace: {
+      dist: {
+        options: {
+          patterns: [
+            {
+              match: /\/\*templateReplacement\*\//,
+              replacement: '<%= grunt.file.read("temp/templates.js") %>'
+            }
+          ]
+        },
+        files: [
+          {expand: true, flatten: true, src: ['src/rzslider.js'], dest: 'dist/'}
+        ]
+      }
+    },
+
+    ngAnnotate: {
+      options: {
+        singleQuotes: true,
+      },
+      rzslider: {
+        files: [{
+            'dist/rzslider.js': 'dist/rzslider.js'
+          }, {
+            expand: true,
+            src: ['dist/rzslider.js']
+          }
+        ]
+      }
     }
+
   });
 
   grunt.loadNpmTasks('grunt-contrib-uglify');
   grunt.loadNpmTasks('grunt-recess');
+  grunt.loadNpmTasks('grunt-angular-templates');
+  grunt.loadNpmTasks('grunt-replace');
+  grunt.loadNpmTasks('grunt-ng-annotate');
 
   grunt.registerTask('default', ['css', 'js']);
 
   grunt.registerTask('css', ['recess']);
-  grunt.registerTask('js', ['uglify']);
+  grunt.registerTask('js', ['ngtemplates','replace', 'ngAnnotate', 'uglify']);
 };

demo/index.html

@@ -115,7 +115,7 @@
 </body>
 
 <script src="../bower_components/angular/angular.min.js"></script>
-<script src="../rzslider.js"></script>
+<script src="../dist/rzslider.js"></script>
 <script>
     var app = angular.module('plunker', ['rzModule']);
 

dist/rzslider.js

+/**
+ * Angular JS slider directive
+ *
+ * (c) Rafal Zajac <rzajac@gmail.com>
+ * http://github.com/rzajac/angularjs-slider
+ *
+ * Version: v0.1.29
+ *
+ * Licensed under the MIT license
+ */
+
+/*jslint unparam: true */
+/*global angular: false, console: false */
+(function (root, factory) {
+
+  if (typeof define === 'function' && define.amd) {
+    // AMD. Register as an anonymous module.
+    define(['angular', 'underscore'], factory);
+  } else if (typeof module === 'object' && module.exports) {
+    // Node. Does not work with strict CommonJS, but
+    // only CommonJS-like environments that support module.exports,
+    // like Node.
+    // to support bundler like browserify
+    module.exports = factory(require('angular'));
+  } else {
+    // Browser globals (root is window)
+    factory(root.angular);
+  }
+
+}(this, function (angular) {
+
+var module = angular.module('rzModule', [])
+
+.value('throttle',
+  /**
+   * throttle
+   *
+   * Taken from underscore project
+   *
+   * @param {Function} func
+   * @param {number} wait
+   * @param {ThrottleOptions} options
+   * @returns {Function}
+   */
+function throttle(func, wait, options) {
+  'use strict';
+  var getTime = (Date.now || function() {
+    return new Date().getTime();
+  });
+  var context, args, result;
+  var timeout = null;
+  var previous = 0;
+  options = options || {};
+  var later = function() {
+    previous = options.leading === false ? 0 : getTime();
+    timeout = null;
+    result = func.apply(context, args);
+    context = args = null;
+  };
+  return function() {
+    var now = getTime();
+    if (!previous && options.leading === false) { previous = now; }
+    var remaining = wait - (now - previous);
+    context = this;
+    args = arguments;
+    if (remaining <= 0) {
+      clearTimeout(timeout);
+      timeout = null;
+      previous = now;
+      result = func.apply(context, args);
+      context = args = null;
+    } else if (!timeout && options.trailing !== false) {
+      timeout = setTimeout(later, remaining);
+    }
+    return result;
+  };
+})
+
+.factory('RzSlider', ['$timeout', '$document', '$window', 'throttle', function($timeout, $document, $window, throttle)
+{
+  'use strict';
+
+  /**
+   * Slider
+   *
+   * @param {ngScope} scope            The AngularJS scope
+   * @param {Element} sliderElem The slider directive element wrapped in jqLite
+   * @param {*} attributes       The slider directive attributes
+   * @constructor
+   */
+  var Slider = function(scope, sliderElem, attributes)
+  {
+    /**
+     * The slider's scope
+     *
+     * @type {ngScope}
+     */
+    this.scope = scope;
+
+    /**
+     * The slider attributes
+     *
+     * @type {*}
+     */
+    this.attributes = attributes;
+
+    /**
+     * Slider element wrapped in jqLite
+     *
+     * @type {jqLite}
+     */
+    this.sliderElem = sliderElem;
+
+    /**
+     * Slider type
+     *
+     * @type {boolean} Set to true for range slider
+     */
+    this.range = attributes.rzSliderHigh !== undefined && attributes.rzSliderModel !== undefined;
+
+    /**
+     * Whether to allow draggable range
+     *
+     * @type {boolean} Set to true for draggable range slider
+     */
+    this.dragRange = this.range && attributes.rzSliderDraggableRange === 'true';
+
+    /**
+     * Values recorded when first dragging the bar
+     *
+     * @type {Object}
+     */
+    this.dragging = {
+      active: false,
+      value: 0,
+      difference: 0,
+      offset: 0,
+      lowDist: 0,
+      highDist: 0
+    };
+
+    /**
+     * Half of the width of the slider handles
+     *
+     * @type {number}
+     */
+    this.handleHalfWidth = 0;
+
+    /**
+     * Always show selection bar
+     *
+     * @type {boolean}
+     */
+    this.alwaysShowBar = !!attributes.rzSliderAlwaysShowBar;
+
+    /**
+     * Maximum left the slider handle can have
+     *
+     * @type {number}
+     */
+    this.maxLeft = 0;
+
+    /**
+     * Precision
+     *
+     * @type {number}
+     */
+    this.precision = 0;
+
+    /**
+     * Step
+     *
+     * @type {number}
+     */
+    this.step = 0;
+
+    /**
+     * The name of the handle we are currently tracking
+     *
+     * @type {string}
+     */
+    this.tracking = '';
+
+    /**
+     * Minimum value (floor) of the model
+     *
+     * @type {number}
+     */
+    this.minValue = 0;
+
+    /**
+     * Maximum value (ceiling) of the model
+     *
+     * @type {number}
+     */
+    this.maxValue = 0;
+
+    /**
+     * Hide limit labels
+     *
+     * @type {boolean}
+     */
+    this.hideLimitLabels = !!attributes.rzSliderHideLimitLabels;
+
+    /**
+     * Only present model values
+     *
+     * Do not allow to change values
+     *
+     * @type {boolean}
+     */
+    this.presentOnly = attributes.rzSliderPresentOnly === 'true';
+
+    /**
+     * The delta between min and max value
+     *
+     * @type {number}
+     */
+    this.valueRange = 0;
+
+    /**
+     * Set to true if init method already executed
+     *
+     * @type {boolean}
+     */
+    this.initHasRun = false;
+
+    /**
+     * Custom translate function
+     *
+     * @type {function}
+     */
+    this.customTrFn = this.scope.rzSliderTranslate() || function(value) { return String(value); };
+
+    /**
+     * Array of de-registration functions to call on $destroy
+     *
+     * @type {Array.<Function>}
+     */
+    this.deRegFuncs = [];
+
+    // Slider DOM elements wrapped in jqLite
+    this.fullBar = null; // The whole slider bar
+    this.selBar = null;  // Highlight between two handles
+    this.minH = null;  // Left slider handle
+    this.maxH = null;  // Right slider handle
+    this.flrLab = null;  // Floor label
+    this.ceilLab = null; // Ceiling label
+    this.minLab =  null; // Label above the low value
+    this.maxLab = null; // Label above the high value
+    this.cmbLab = null;  // Combined label
+
+    // Initialize slider
+    this.init();
+  };
+
+  // Add instance methods
+  Slider.prototype = {
+
+    /**
+     * Initialize slider
+     *
+     * @returns {undefined}
+     */
+    init: function()
+    {
+      var thrLow, thrHigh, unRegFn,
+        calcDimFn = angular.bind(this, this.calcViewDimensions),
+        self = this;
+
+      this.initElemHandles();
+      this.calcViewDimensions();
+      this.setMinAndMax();
+
+      this.precision = this.scope.rzSliderPrecision === undefined ? 0 : +this.scope.rzSliderPrecision;
+      this.step = this.scope.rzSliderStep === undefined ? 1 : +this.scope.rzSliderStep;
+
+      $timeout(function()
+      {
+        self.updateCeilLab();
+        self.updateFloorLab();
+        self.initHandles();
+        if (!self.presentOnly) { self.bindEvents(); }
+      });
+
+      // Recalculate slider view dimensions
+      unRegFn = this.scope.$on('reCalcViewDimensions', calcDimFn);
+      this.deRegFuncs.push(unRegFn);
+
+      // Recalculate stuff if view port dimensions have changed
+      angular.element($window).on('resize', calcDimFn);
+
+      this.initHasRun = true;
+
+      // Watch for changes to the model
+
+      thrLow = throttle(function()
+      {
+        self.setMinAndMax();
+        self.updateLowHandle(self.valueToOffset(self.scope.rzSliderModel));
+        self.updateSelectionBar();
+
+        if(self.range)
+        {
+          self.updateCmbLabel();
+        }
+
+      }, 350, { leading: false });
+
+      thrHigh = throttle(function()
+      {
+        self.setMinAndMax();
+        self.updateHighHandle(self.valueToOffset(self.scope.rzSliderHigh));
+        self.updateSelectionBar();
+        self.updateCmbLabel();
+      }, 350, { leading: false });
+
+      this.scope.$on('rzSliderForceRender', function()
+      {
+        self.resetLabelsValue();
+        thrLow();
+        if(self.range) { thrHigh(); }
+        self.resetSlider();
+      });
+
+      // Watchers
+
+      unRegFn = this.scope.$watch('rzSliderModel', function(newValue, oldValue)
+      {
+        if(newValue === oldValue) { return; }
+        thrLow();
+      });
+      this.deRegFuncs.push(unRegFn);
+
+      unRegFn = this.scope.$watch('rzSliderHigh', function(newValue, oldValue)
+      {
+        if(newValue === oldValue) { return; }
+        thrHigh();
+      });
+      this.deRegFuncs.push(unRegFn);
+
+      this.scope.$watch('rzSliderFloor', function(newValue, oldValue)
+      {
+        if(newValue === oldValue) { return; }
+        self.resetSlider();
+      });
+      this.deRegFuncs.push(unRegFn);
+
+      unRegFn = this.scope.$watch('rzSliderCeil', function(newValue, oldValue)
+      {
+        if(newValue === oldValue) { return; }
+        self.resetSlider();
+      });
+      this.deRegFuncs.push(unRegFn);
+
+      this.scope.$on('$destroy', function()
+      {
+        self.minH.off();
+        self.maxH.off();
+        self.fullBar.off();
+        self.selBar.off();
+        angular.element($window).off('resize', calcDimFn);
+        self.deRegFuncs.map(function(unbind) { unbind(); });
+      });
+    },
+
+    /**
+     * Resets slider
+     *
+     * @returns {undefined}
+     */
+    resetSlider: function()
+    {
+      this.setMinAndMax();
+      this.updateCeilLab();
+      this.updateFloorLab();
+      this.calcViewDimensions();
+    },
+
+    /**
+     * Reset label values
+     *
+     * @return {undefined}
+     */
+    resetLabelsValue: function()
+    {
+      this.minLab.rzsv = undefined;
+      this.maxLab.rzsv = undefined;
+    },
+
+    /**
+     * Initialize slider handles positions and labels
+     *
+     * Run only once during initialization and every time view port changes size
+     *
+     * @returns {undefined}
+     */
+    initHandles: function()
+    {
+      this.updateLowHandle(this.valueToOffset(this.scope.rzSliderModel));
+
+      if(this.range)
+      {
+        this.updateHighHandle(this.valueToOffset(this.scope.rzSliderHigh));
+        this.updateCmbLabel();
+      }
+
+      this.updateSelectionBar();
+    },
+
+    /**
+     * Translate value to human readable format
+     *
+     * @param {number|string} value
+     * @param {jqLite} label
+     * @param {bool?} useCustomTr
+     * @returns {undefined}
+     */
+    translateFn: function(value, label, useCustomTr)
+    {
+      useCustomTr = useCustomTr === undefined ? true : useCustomTr;
+
+      var valStr = String(useCustomTr ? this.customTrFn(value) : value),
+          getWidth = false;
+
+      if(label.rzsv === undefined || label.rzsv.length !== valStr.length || (label.rzsv.length > 0 && label.rzsw === 0))
+      {
+        getWidth = true;
+        label.rzsv = valStr;
+      }
+
+      label.text(valStr);
+
+      // Update width only when length of the label have changed
+      if(getWidth) { this.getWidth(label); }
+    },
+
+    /**
+     * Set maximum and minimum values for the slider
+     *
+     * @returns {undefined}
+     */
+    setMinAndMax: function()
+    {
+      if(this.scope.rzSliderFloor)
+      {
+        this.minValue = +this.scope.rzSliderFloor;
+      }
+      else
+      {
+        this.minValue = this.scope.rzSliderFloor = 0;
+      }
+
+      if(this.scope.rzSliderCeil)
+      {
+        this.maxValue = +this.scope.rzSliderCeil;
+      }
+      else
+      {
+        this.scope.rzSliderCeil = this.maxValue = this.range ? this.scope.rzSliderHigh : this.scope.rzSliderModel;
+      }
+
+      if(this.scope.rzSliderStep)
+      {
+        this.step = +this.scope.rzSliderStep;
+      }
+
+      this.valueRange = this.maxValue - this.minValue;
+    },
+
+    /**
+     * Set the slider children to variables for easy access
+     *
+     * Run only once during initialization
+     *
+     * @returns {undefined}
+     */
+    initElemHandles: function()
+    {
+      // Assign all slider elements to object properties for easy access
+      angular.forEach(this.sliderElem.children(), function(elem, index)
+      {
+        var jElem = angular.element(elem);
+
+        switch(index)
+        {
+          case 0: this.fullBar = jElem; break;
+          case 1: this.selBar = jElem; break;
+          case 2: this.minH = jElem; break;
+          case 3: this.maxH = jElem; break;
+          case 4: this.flrLab = jElem; break;
+          case 5: this.ceilLab = jElem; break;
+          case 6: this.minLab = jElem; break;
+          case 7: this.maxLab = jElem; break;
+          case 8: this.cmbLab = jElem; break;
+        }
+
+      }, this);
+
+      // Initialize offset cache properties
+      this.selBar.rzsl = 0;
+      this.minH.rzsl = 0;
+      this.maxH.rzsl = 0;
+      this.flrLab.rzsl = 0;
+      this.ceilLab.rzsl = 0;
+      this.minLab.rzsl = 0;
+      this.maxLab.rzsl = 0;
+      this.cmbLab.rzsl = 0;
+
+      // Hide limit labels
+      if(this.hideLimitLabels)
+      {
+        this.flrLab.rzAlwaysHide = true;
+        this.ceilLab.rzAlwaysHide = true;
+        this.hideEl(this.flrLab);
+        this.hideEl(this.ceilLab);
+      }
+
+      // Remove stuff not needed in single slider
+      if(this.range === false)
+      {
+        this.cmbLab.remove();
+        this.maxLab.remove();
+
+        // Hide max handle
+        this.maxH.rzAlwaysHide = true;
+        this.maxH[0].style.zIndex = '-1000';
+        this.hideEl(this.maxH);
+      }
+
+      // Show selection bar for single slider or not
+      if(this.range === false && this.alwaysShowBar === false)
+      {
+        this.maxH.remove();
+        this.selBar.remove();
+      }
+
+      // If using draggable range, use appropriate cursor for this.selBar.
+      if (this.dragRange)
+      {
+        this.selBar.css('cursor', 'move');
+        this.selBar.addClass('rz-draggable');
+      }
+    },
+
+    /**
+     * Calculate dimensions that are dependent on view port size
+     *
+     * Run once during initialization and every time view port changes size.
+     *
+     * @returns {undefined}
+     */
+    calcViewDimensions: function ()
+    {
+      var handleWidth = this.getWidth(this.minH);
+
+      this.handleHalfWidth = handleWidth / 2;
+      this.barWidth = this.getWidth(this.fullBar);
+
+      this.maxLeft = this.barWidth - handleWidth;
+
+      this.getWidth(this.sliderElem);
+      this.sliderElem.rzsl = this.sliderElem[0].getBoundingClientRect().left;
+
+      if(this.initHasRun)
+      {
+        this.updateCeilLab();
+        this.initHandles();
+      }
+    },
+
+    /**
+     * Update position of the ceiling label
+     *
+     * @returns {undefined}
+     */
+    updateCeilLab: function()
+    {
+      this.translateFn(this.scope.rzSliderCeil, this.ceilLab);
+      this.setLeft(this.ceilLab, this.barWidth - this.ceilLab.rzsw);
+      this.getWidth(this.ceilLab);
+    },
+
+    /**
+     * Update position of the floor label
+     *
+     * @returns {undefined}
+     */
+    updateFloorLab: function()
+    {
+      this.translateFn(this.scope.rzSliderFloor, this.flrLab);
+      this.getWidth(this.flrLab);
+    },
+
+    /**
+     * Call the onStart callback if defined
+     *
+     * @returns {undefined}
+     */
+    callOnStart: function() {
+      if(this.scope.rzSliderOnStart) {
+        var self = this;
+        $timeout(function() {
+            self.scope.rzSliderOnStart();
+        });
+      }
+    },
+
+    /**
+     * Call the onChange callback if defined
+     *
+     * @returns {undefined}
+     */
+    callOnChange: function() {
+      if(this.scope.rzSliderOnChange) {
+        var self = this;
+        $timeout(function() {
+            self.scope.rzSliderOnChange();
+        });
+      }
+    },
+
+    /**
+     * Call the onEnd callback if defined
+     *
+     * @returns {undefined}
+     */
+    callOnEnd: function() {
+      if(this.scope.rzSliderOnEnd) {
+        var self = this;
+        $timeout(function() {
+            self.scope.rzSliderOnEnd();
+        });
+      }
+    },
+
+    /**
+     * Update slider handles and label positions
+     *
+     * @param {string} which
+     * @param {number} newOffset
+     */
+    updateHandles: function(which, newOffset)
+    {
+      if(which === 'rzSliderModel')
+      {
+        this.updateLowHandle(newOffset);
+        this.updateSelectionBar();
+
+        if(this.range)
+        {
+          this.updateCmbLabel();
+        }
+        return;
+      }
+
+      if(which === 'rzSliderHigh')
+      {
+        this.updateHighHandle(newOffset);
+        this.updateSelectionBar();
+
+        if(this.range)
+        {
+          this.updateCmbLabel();
+        }
+        return;
+      }
+
+      // Update both
+      this.updateLowHandle(newOffset);
+      this.updateHighHandle(newOffset);
+      this.updateSelectionBar();
+      this.updateCmbLabel();
+    },
+
+    /**
+     * Update low slider handle position and label
+     *
+     * @param {number} newOffset
+     * @returns {undefined}
+     */
+    updateLowHandle: function(newOffset)
+    {
+      var delta = Math.abs(this.minH.rzsl - newOffset);
+
+      if(this.minLab.rzsv && delta < 1) { return; }
+
+      this.setLeft(this.minH, newOffset);
+      this.translateFn(this.scope.rzSliderModel, this.minLab);
+      this.setLeft(this.minLab, newOffset - this.minLab.rzsw / 2 + this.handleHalfWidth);
+
+      this.shFloorCeil();
+    },
+
+    /**
+     * Update high slider handle position and label
+     *
+     * @param {number} newOffset
+     * @returns {undefined}
+     */
+    updateHighHandle: function(newOffset)
+    {
+      this.setLeft(this.maxH, newOffset);
+      this.translateFn(this.scope.rzSliderHigh, this.maxLab);
+      this.setLeft(this.maxLab, newOffset - this.maxLab.rzsw / 2 + this.handleHalfWidth);
+
+      this.shFloorCeil();
+    },
+
+    /**
+     * Show / hide floor / ceiling label
+     *
+     * @returns {undefined}
+     */
+    shFloorCeil: function()
+    {
+      var flHidden = false, clHidden = false;
+
+      if(this.minLab.rzsl <= this.flrLab.rzsl + this.flrLab.rzsw + 5)
+      {
+        flHidden = true;
+        this.hideEl(this.flrLab);
+      }
+      else
+      {
+        flHidden = false;
+        this.showEl(this.flrLab);
+      }
+
+      if(this.minLab.rzsl + this.minLab.rzsw >= this.ceilLab.rzsl - this.handleHalfWidth - 10)
+      {
+        clHidden = true;
+        this.hideEl(this.ceilLab);
+      }
+      else
+      {
+        clHidden = false;
+        this.showEl(this.ceilLab);
+      }
+
+      if(this.range)
+      {
+        if(this.maxLab.rzsl + this.maxLab.rzsw >= this.ceilLab.rzsl - 10)
+        {
+          this.hideEl(this.ceilLab);
+        }
+        else if( ! clHidden)
+        {
+          this.showEl(this.ceilLab);
+        }
+
+        // Hide or show floor label
+        if(this.maxLab.rzsl <= this.flrLab.rzsl + this.flrLab.rzsw + this.handleHalfWidth)
+        {
+          this.hideEl(this.flrLab);
+        }
+        else if( ! flHidden)
+        {
+          this.showEl(this.flrLab);
+        }
+      }
+    },
+
+    /**
+     * Update slider selection bar, combined label and range label
+     *
+     * @returns {undefined}
+     */
+    updateSelectionBar: function()
+    {
+      this.setWidth(this.selBar, Math.abs(this.maxH.rzsl - this.minH.rzsl));
+      this.setLeft(this.selBar, this.range ? this.minH.rzsl + this.handleHalfWidth : 0);
+    },
+
+    /**
+     * Update combined label position and value
+     *
+     * @returns {undefined}
+     */
+    updateCmbLabel: function()
+    {
+      var lowTr, highTr;
+
+      if(this.minLab.rzsl + this.minLab.rzsw + 10 >= this.maxLab.rzsl)
+      {
+        if(this.customTrFn)
+        {
+          lowTr = this.customTrFn(this.scope.rzSliderModel);
+          highTr = this.customTrFn(this.scope.rzSliderHigh);
+        }
+        else
+        {
+          lowTr = this.scope.rzSliderModel;
+          highTr = this.scope.rzSliderHigh;
+        }
+
+        this.translateFn(lowTr + ' - ' + highTr, this.cmbLab, false);
+        this.setLeft(this.cmbLab, this.selBar.rzsl + this.selBar.rzsw / 2 - this.cmbLab.rzsw / 2);
+        this.hideEl(this.minLab);
+        this.hideEl(this.maxLab);
+        this.showEl(this.cmbLab);
+      }
+      else
+      {
+        this.showEl(this.maxLab);
+        this.showEl(this.minLab);
+        this.hideEl(this.cmbLab);
+      }
+    },
+
+    /**
+     * Round value to step and precision
+     *
+     * @param {number} value
+     * @returns {number}
+     */
+    roundStep: function(value)
+    {
+      var step = this.step,
+          remainder = +((value - this.minValue) % step).toFixed(3),
+          steppedValue = remainder > (step / 2) ? value + step - remainder : value - remainder;
+
+      steppedValue = steppedValue.toFixed(this.precision);
+      return +steppedValue;
+    },
+
+    /**
+     * Hide element
+     *
+     * @param element
+     * @returns {jqLite} The jqLite wrapped DOM element
+     */
+    hideEl: function (element)
+    {
+      return element.css({opacity: 0});
+    },
+
+    /**
+     * Show element
+     *
+     * @param element The jqLite wrapped DOM element
+     * @returns {jqLite} The jqLite
+     */
+    showEl: function (element)
+    {
+      if(!!element.rzAlwaysHide) { return element; }
+
+      return element.css({opacity: 1});
+    },
+
+    /**
+     * Set element left offset
+     *
+     * @param {jqLite} elem The jqLite wrapped DOM element
+     * @param {number} left
+     * @returns {number}
+     */
+    setLeft: function (elem, left)
+    {
+      elem.rzsl = left;
+      elem.css({left: left + 'px'});
+      return left;
+    },
+
+    /**
+     * Get element width
+     *
+     * @param {jqLite} elem The jqLite wrapped DOM element
+     * @returns {number}
+     */
+    getWidth: function(elem)
+    {
+      var val = elem[0].getBoundingClientRect();
+      elem.rzsw = val.right - val.left;
+      return elem.rzsw;
+    },
+
+    /**
+     * Set element width
+     *
+     * @param {jqLite} elem  The jqLite wrapped DOM element
+     * @param {number} width
+     * @returns {*}
+     */
+    setWidth: function(elem, width)
+    {
+      elem.rzsw = width;
+      elem.css({width: width + 'px'});
+      return width;
+    },
+
+    /**
+     * Translate value to pixel offset
+     *
+     * @param {number} val
+     * @returns {number}
+     */
+    valueToOffset: function(val)
+    {
+      return (val - this.minValue) * this.maxLeft / this.valueRange;
+    },
+
+    /**
+     * Translate offset to model value
+     *
+     * @param {number} offset
+     * @returns {number}
+     */
+    offsetToValue: function(offset)
+    {
+      return (offset / this.maxLeft) * this.valueRange + this.minValue;
+    },
+
+    // Events
+
+    /**
+     * Get the X-coordinate of an event
+     *
+     * @param {Object} event  The event
+     * @returns {number}
+     */
+    getEventX: function(event)
+    {
+      /* http://stackoverflow.com/a/12336075/282882 */
+      //noinspection JSLint
+      if('clientX' in event)
+      {
+        return event.clientX;
+      }
+
+      return event.originalEvent === undefined ?
+          event.touches[0].clientX
+          : event.originalEvent.touches[0].clientX;
+    },
+
+    /**
+     * Get the handle closest to an event.
+     *
+     * @param event {Event} The event
+     * @returns {jqLite} The handle closest to the event.
+     */
+    getNearestHandle: function(event)
+    {
+      if (!this.range) { return this.minH; }
+      var offset = this.getEventX(event) - this.sliderElem.rzsl - this.handleHalfWidth;
+      return Math.abs(offset - this.minH.rzsl) < Math.abs(offset - this.maxH.rzsl) ? this.minH : this.maxH;
+    },
+
+    /**
+     * Bind mouse and touch events to slider handles
+     *
+     * @returns {undefined}
+     */
+    bindEvents: function()
+    {
+      var barTracking, barStart, barMove;
+
+      if (this.dragRange)
+      {
+        barTracking = 'rzSliderDrag';
+        barStart = this.onDragStart;
+        barMove = this.onDragMove;
+      }
+      else
+      {
+        barTracking = 'rzSliderModel';
+        barStart = this.onStart;
+        barMove = this.onMove;
+      }
+
+      this.minH.on('mousedown', angular.bind(this, this.onStart, this.minH, 'rzSliderModel'));
+      if(this.range) { this.maxH.on('mousedown', angular.bind(this, this.onStart, this.maxH, 'rzSliderHigh')); }
+      this.fullBar.on('mousedown', angular.bind(this, this.onStart, null, null));
+      this.fullBar.on('mousedown', angular.bind(this, this.onMove, this.fullBar));
+      this.selBar.on('mousedown', angular.bind(this, barStart, null, barTracking));
+      this.selBar.on('mousedown', angular.bind(this, barMove, this.selBar));
+
+      this.minH.on('touchstart', angular.bind(this, this.onStart, this.minH, 'rzSliderModel'));
+      if(this.range) { this.maxH.on('touchstart', angular.bind(this, this.onStart, this.maxH, 'rzSliderHigh')); }
+      this.fullBar.on('touchstart', angular.bind(this, this.onStart, null, null));
+      this.fullBar.on('touchstart', angular.bind(this, this.onMove, this.fullBar));
+      this.selBar.on('touchstart', angular.bind(this, barStart, null, barTracking));
+      this.selBar.on('touchstart', angular.bind(this, barMove, this.selBar));
+    },
+
+    /**
+     * onStart event handler
+     *
+     * @param {?Object} pointer The jqLite wrapped DOM element; if null, the closest handle is used
+     * @param {?string} ref     The name of the handle being changed; if null, the closest handle's value is modified
+     * @param {Event}   event   The event
+     * @returns {undefined}
+     */
+    onStart: function (pointer, ref, event)
+    {
+      var ehMove, ehEnd,
+          eventNames = this.getEventNames(event);
+
+      event.stopPropagation();
+      event.preventDefault();
+
+      if(this.tracking !== '') { return; }
+
+      // We have to do this in case the HTML where the sliders are on
+      // have been animated into view.
+      this.calcViewDimensions();
+
+      if(pointer)
+      {
+        this.tracking = ref;
+      }
+      else
+      {
+        pointer = this.getNearestHandle(event);
+        this.tracking = pointer === this.minH ? 'rzSliderModel' : 'rzSliderHigh';
+      }
+
+      pointer.addClass('rz-active');
+
+      ehMove = angular.bind(this, this.dragging.active ? this.onDragMove : this.onMove, pointer);
+      ehEnd = angular.bind(this, this.onEnd, ehMove);
+
+      $document.on(eventNames.moveEvent, ehMove);
+      $document.one(eventNames.endEvent, ehEnd);
+      this.callOnStart();
+    },
+
+    /**
+     * onMove event handler
+     *
+     * @param {jqLite} pointer
+     * @param {Event}  event The event
+     * @returns {undefined}
+     */
+    onMove: function (pointer, event)
+    {
+      var eventX = this.getEventX(event),
+          sliderLO, newOffset, newValue;
+
+      sliderLO = this.sliderElem.rzsl;
+      newOffset = eventX - sliderLO - this.handleHalfWidth;
+
+      if(newOffset <= 0)
+      {
+        if(pointer.rzsl === 0)
+          return;
+        newValue = this.minValue;
+        newOffset = 0;
+      }
+      else if(newOffset >= this.maxLeft)
+      {
+        if(pointer.rzsl === this.maxLeft)
+          return;
+        newValue = this.maxValue;
+        newOffset = this.maxLeft;
+      }
+      else {
+        newValue = this.offsetToValue(newOffset);
+        newValue = this.roundStep(newValue);
+        newOffset = this.valueToOffset(newValue);
+      }
+      this.positionTrackingHandle(newValue, newOffset);
+    },
+
+    /**
+     * onDragStart event handler
+     *
+     * Handles dragging of the middle bar.
+     *
+     * @param {Object} pointer The jqLite wrapped DOM element
+     * @param {string} ref     One of the refLow, refHigh values
+     * @param {Event}  event   The event
+     * @returns {undefined}
+     */
+    onDragStart: function(pointer, ref, event)
+    {
+      var offset = this.getEventX(event) - this.sliderElem.rzsl - this.handleHalfWidth;
+      this.dragging = {
+        active: true,
+        value: this.offsetToValue(offset),
+        difference: this.scope.rzSliderHigh - this.scope.rzSliderModel,
+        offset: offset,
+        lowDist: offset - this.minH.rzsl,
+        highDist: this.maxH.rzsl - offset
+      };
+      this.minH.addClass('rz-active');
+      this.maxH.addClass('rz-active');
+
+      this.onStart(pointer, ref, event);
+    },
+
+    /**
+     * onDragMove event handler
+     *
+     * Handles dragging of the middle bar.
+     *
+     * @param {jqLite} pointer
+     * @param {Event}  event The event
+     * @returns {undefined}
+     */
+    onDragMove: function(pointer, event)
+    {
+      var newOffset = this.getEventX(event) - this.sliderElem.rzsl - this.handleHalfWidth,
+          newMinOffset, newMaxOffset,
+          newMinValue, newMaxValue;
+
+      if (newOffset <= this.dragging.lowDist)
+      {
+        if (pointer.rzsl === this.dragging.lowDist) { return; }
+        newMinValue = this.minValue;
+        newMinOffset = 0;
+        newMaxValue = this.dragging.difference;
+        newMaxOffset = this.valueToOffset(newMaxValue);
+      }
+      else if (newOffset >= this.maxLeft - this.dragging.highDist)
+      {
+        if (pointer.rzsl === this.dragging.highDist) { return; }
+        newMaxValue = this.maxValue;
+        newMaxOffset = this.maxLeft;
+        newMinValue = this.maxValue - this.dragging.difference;
+        newMinOffset = this.valueToOffset(newMinValue);
+      }
+      else
+      {
+        newMinValue = this.offsetToValue(newOffset - this.dragging.lowDist);
+        newMinValue = this.roundStep(newMinValue);
+        newMinOffset = this.valueToOffset(newMinValue);
+        newMaxValue = newMinValue + this.dragging.difference;
+        newMaxOffset = this.valueToOffset(newMaxValue);
+      }
+
+      this.positionTrackingBar(newMinValue, newMaxValue, newMinOffset, newMaxOffset);
+    },
+
+    /**
+     * Set the new value and offset for the entire bar
+     *
+     * @param {number} newMinValue   the new minimum value
+     * @param {number} newMaxValue   the new maximum value
+     * @param {number} newMinOffset  the new minimum offset
+     * @param {number} newMaxOffset  the new maximum offset
+     */
+    positionTrackingBar: function(newMinValue, newMaxValue, newMinOffset, newMaxOffset)
+    {
+      this.scope.rzSliderModel = newMinValue;
+      this.scope.rzSliderHigh = newMaxValue;
+      this.updateHandles('rzSliderModel', newMinOffset);
+      this.updateHandles('rzSliderHigh', newMaxOffset);
+      this.scope.$apply();
+      this.callOnChange();
+    },
+
+    /**
+     * Set the new value and offset to the current tracking handle
+     *
+     * @param {number} newValue new model value
+     * @param {number} newOffset new offset value
+     */
+    positionTrackingHandle: function(newValue, newOffset)
+    {
+      if(this.range)
+      {
+        /* This is to check if we need to switch the min and max handles*/
+        if (this.tracking === 'rzSliderModel' && newValue >= this.scope.rzSliderHigh)
+        {
+          this.scope[this.tracking] = this.scope.rzSliderHigh;
+          this.updateHandles(this.tracking, this.maxH.rzsl);
+          this.tracking = 'rzSliderHigh';
+          this.minH.removeClass('rz-active');
+          this.maxH.addClass('rz-active');
+           /* We need to apply here because we are not sure that we will enter the next block */
+          this.scope.$apply();
+          this.callOnChange();
+        }
+        else if(this.tracking === 'rzSliderHigh' && newValue <= this.scope.rzSliderModel)
+        {
+          this.scope[this.tracking] = this.scope.rzSliderModel;
+          this.updateHandles(this.tracking, this.minH.rzsl);
+          this.tracking = 'rzSliderModel';
+          this.maxH.removeClass('rz-active');
+          this.minH.addClass('rz-active');
+           /* We need to apply here because we are not sure that we will enter the next block */
+          this.scope.$apply();
+          this.callOnChange();
+        }
+      }
+
+      if(this.scope[this.tracking] !== newValue)
+      {
+        this.scope[this.tracking] = newValue;
+        this.updateHandles(this.tracking, newOffset);
+        this.scope.$apply();
+        this.callOnChange();
+      }
+    },
+
+    /**
+     * onEnd event handler
+     *
+     * @param {Event}    event    The event
+     * @param {Function} ehMove   The the bound move event handler
+     * @returns {undefined}
+     */
+    onEnd: function(ehMove, event)
+    {
+      var moveEventName = this.getEventNames(event).moveEvent;
+
+      this.minH.removeClass('rz-active');
+      this.maxH.removeClass('rz-active');
+
+      $document.off(moveEventName, ehMove);
+
+      this.scope.$emit('slideEnded');
+      this.tracking = '';
+
+      this.dragging.active = false;
+      this.callOnEnd();
+    },
+
+    /**
+     * Get event names for move and event end
+     *
+     * @param {Event}    event    The event
+     *
+     * @return {{moveEvent: string, endEvent: string}}
+     */
+    getEventNames: function(event)
+    {
+      var eventNames = {moveEvent: '', endEvent: ''};
+
+      if(event.touches || (event.originalEvent !== undefined && event.originalEvent.touches))
+      {
+        eventNames.moveEvent = 'touchmove';
+        eventNames.endEvent = 'touchend';
+      }
+      else
+      {
+        eventNames.moveEvent = 'mousemove';
+        eventNames.endEvent = 'mouseup';
+      }
+
+      return eventNames;
+    }
+  };
+
+  return Slider;
+}])
+
+.directive('rzslider', ['RzSlider', function(RzSlider)
+{
+  'use strict';
+
+  return {
+    restrict: 'E',
+    scope: {
+      rzSliderFloor: '=?',
+      rzSliderCeil: '=?',
+      rzSliderStep: '@',
+      rzSliderPrecision: '@',
+      rzSliderModel: '=?',
+      rzSliderHigh: '=?',
+      rzSliderDraggable: '@',
+      rzSliderTranslate: '&',
+      rzSliderHideLimitLabels: '=?',
+      rzSliderAlwaysShowBar: '=?',
+      rzSliderPresentOnly: '@',
+      rzSliderOnStart: '&',
+      rzSliderOnChange: '&',
+      rzSliderOnEnd: '&'
+    },
+
+    /**
+     * Return template URL
+     *
+     * @param {*} elem
+     * @param {*} attrs
+     * @return {string}
+     */
+    templateUrl: function(elem, attrs) {
+      //noinspection JSUnresolvedVariable
+      return attrs.rzSliderTplUrl || 'rzSliderTpl.html';
+    },
+
+    link: function(scope, elem, attr)
+    {
+      return new RzSlider(scope, elem, attr);
+    }
+  };
+}]);
+
+// IDE assist
+
+/**
+ * @name ngScope
+ *
+ * @property {number} rzSliderModel
+ * @property {number} rzSliderHigh
+ * @property {number} rzSliderCeil
+ */
+
+/**
+ * @name jqLite
+ *
+ * @property {number|undefined} rzsl
+ * @property {number|undefined} rzsw
+ * @property {string|undefined} rzsv
+ * @property {Function} css
+ * @property {Function} text
+ */
+
+/**
+ * @name Event
+ * @property {Array} touches
+ * @property {Event} originalEvent
+ */
+
+/**
+ * @name ThrottleOptions
+ *
+ * @property {bool} leading
+ * @property {bool} trailing
+ */
+
+  module.run(['$templateCache', function($templateCache) {
+  'use strict';
+
+  $templateCache.put('rzSliderTpl.html',
+    "<span class=rz-bar-wrapper><span class=rz-bar></span></span> <span class=rz-bar-wrapper><span class=\"rz-bar rz-selection\"></span></span> <span class=rz-pointer></span> <span class=rz-pointer></span> <span class=\"rz-bubble rz-limit\"></span> <span class=\"rz-bubble rz-limit\"></span> <span class=rz-bubble></span> <span class=rz-bubble></span> <span class=rz-bubble></span>"
+  );
+
+}]);
+
+  return module
+}));

dist/rzslider.min.css

-/*! jusas-angularjs-slider - v0.1.29 - (c) Rafal Zajac <rzajac@gmail.com>, Jussi Saarivirta <jusasi@gmail.com>, Angelin Sirbu <angelin.sirbu@gmail.com>, https://github.com/rzajac/angularjs-slider.git - 2015-09-09 */
+/*! jusas-angularjs-slider - v0.1.29 - (c) Rafal Zajac <rzajac@gmail.com>, Jussi Saarivirta <jusasi@gmail.com>, Angelin Sirbu <angelin.sirbu@gmail.com>, https://github.com/rzajac/angularjs-slider.git - 2015-09-13 */
 rzslider{position:relative;display:inline-block;width:100%;height:4px;margin:30px 0 15px 0;vertical-align:middle}rzslider span{position:absolute;display:inline-block;white-space:nowrap}rzslider span.rz-base{width:100%;height:100%;padding:0}rzslider span.rz-bar-wrapper{left:0;width:100%;height:32px;padding-top:16px;margin-top:-16px;box-sizing:border-box}rzslider span.rz-bar{left:0;z-index:0;width:100%;height:4px;background:#d8e0f3;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px}rzslider span.rz-bar.rz-selection{z-index:1;background:#0db9f0;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px}rzslider span.rz-pointer{top:-14px;z-index:2;width:32px;height:32px;cursor:pointer;background-color:#0db9f0;-webkit-border-radius:16px;-moz-border-radius:16px;border-radius:16px}rzslider span.rz-pointer:after{position:absolute;top:12px;left:12px;width:8px;height:8px;background:#fff;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;content:''}rzslider span.rz-pointer:hover:after{background-color:#fff}rzslider span.rz-pointer.rz-active:after{background-color:#451aff}rzslider span.rz-bubble{top:-32px;padding:1px 3px;color:#55637d;cursor:default}rzslider span.rz-bubble.rz-selection{top:16px}rzslider span.rz-bubble.rz-limit{color:#55637d}
\ No newline at end of file

dist/rzslider.min.js

-/*! jusas-angularjs-slider - v0.1.29 - (c) Rafal Zajac <rzajac@gmail.com>, Jussi Saarivirta <jusasi@gmail.com>, Angelin Sirbu <angelin.sirbu@gmail.com>, https://github.com/rzajac/angularjs-slider.git - 2015-09-09 */
-angular.module("rzModule",[]).run(["$templateCache",function(a){"use strict";var b='<span class="rz-bar-wrapper"><span class="rz-bar"></span></span><span class="rz-bar-wrapper"><span class="rz-bar rz-selection"></span></span><span class="rz-pointer"></span><span class="rz-pointer"></span><span class="rz-bubble rz-limit"></span><span class="rz-bubble rz-limit"></span><span class="rz-bubble"></span><span class="rz-bubble"></span><span class="rz-bubble"></span>';a.put("rzSliderTpl.html",b)}]).value("throttle",function(a,b,c){"use strict";var d,e,f,g=Date.now||function(){return(new Date).getTime()},h=null,i=0;c=c||{};var j=function(){i=c.leading===!1?0:g(),h=null,f=a.apply(d,e),d=e=null};return function(){var k=g();i||c.leading!==!1||(i=k);var l=b-(k-i);return d=this,e=arguments,0>=l?(clearTimeout(h),h=null,i=k,f=a.apply(d,e),d=e=null):h||c.trailing===!1||(h=setTimeout(j,l)),f}}).factory("RzSlider",["$timeout","$document","$window","throttle",function(a,b,c,d){"use strict";var e=function(a,b,c){this.scope=a,this.attributes=c,this.sliderElem=b,this.range=void 0!==c.rzSliderHigh&&void 0!==c.rzSliderModel,this.dragRange=this.range&&"true"===c.rzSliderDraggableRange,this.dragging={active:!1,value:0,difference:0,offset:0,lowDist:0,highDist:0},this.handleHalfWidth=0,this.alwaysShowBar=!!c.rzSliderAlwaysShowBar,this.maxLeft=0,this.precision=0,this.step=0,this.tracking="",this.minValue=0,this.maxValue=0,this.hideLimitLabels=!!c.rzSliderHideLimitLabels,this.presentOnly="true"===c.rzSliderPresentOnly,this.valueRange=0,this.initHasRun=!1,this.customTrFn=this.scope.rzSliderTranslate()||function(a){return String(a)},this.deRegFuncs=[],this.fullBar=null,this.selBar=null,this.minH=null,this.maxH=null,this.flrLab=null,this.ceilLab=null,this.minLab=null,this.maxLab=null,this.cmbLab=null,this.init()};return e.prototype={init:function(){var b,e,f,g=angular.bind(this,this.calcViewDimensions),h=this;this.initElemHandles(),this.calcViewDimensions(),this.setMinAndMax(),this.precision=void 0===this.scope.rzSliderPrecision?0:+this.scope.rzSliderPrecision,this.step=void 0===this.scope.rzSliderStep?1:+this.scope.rzSliderStep,a(function(){h.updateCeilLab(),h.updateFloorLab(),h.initHandles(),h.presentOnly||h.bindEvents()}),f=this.scope.$on("reCalcViewDimensions",g),this.deRegFuncs.push(f),angular.element(c).on("resize",g),this.initHasRun=!0,b=d(function(){h.setMinAndMax(),h.updateLowHandle(h.valueToOffset(h.scope.rzSliderModel)),h.updateSelectionBar(),h.range&&h.updateCmbLabel()},350,{leading:!1}),e=d(function(){h.setMinAndMax(),h.updateHighHandle(h.valueToOffset(h.scope.rzSliderHigh)),h.updateSelectionBar(),h.updateCmbLabel()},350,{leading:!1}),this.scope.$on("rzSliderForceRender",function(){h.resetLabelsValue(),b(),h.range&&e(),h.resetSlider()}),f=this.scope.$watch("rzSliderModel",function(a,c){a!==c&&b()}),this.deRegFuncs.push(f),f=this.scope.$watch("rzSliderHigh",function(a,b){a!==b&&e()}),this.deRegFuncs.push(f),this.scope.$watch("rzSliderFloor",function(a,b){a!==b&&h.resetSlider()}),this.deRegFuncs.push(f),f=this.scope.$watch("rzSliderCeil",function(a,b){a!==b&&h.resetSlider()}),this.deRegFuncs.push(f),this.scope.$on("$destroy",function(){h.minH.off(),h.maxH.off(),h.fullBar.off(),h.selBar.off(),angular.element(c).off("resize",g),h.deRegFuncs.map(function(a){a()})})},resetSlider:function(){this.setMinAndMax(),this.updateCeilLab(),this.updateFloorLab(),this.calcViewDimensions()},resetLabelsValue:function(){this.minLab.rzsv=void 0,this.maxLab.rzsv=void 0},initHandles:function(){this.updateLowHandle(this.valueToOffset(this.scope.rzSliderModel)),this.range&&(this.updateHighHandle(this.valueToOffset(this.scope.rzSliderHigh)),this.updateCmbLabel()),this.updateSelectionBar()},translateFn:function(a,b,c){c=void 0===c?!0:c;var d=String(c?this.customTrFn(a):a),e=!1;(void 0===b.rzsv||b.rzsv.length!==d.length||b.rzsv.length>0&&0===b.rzsw)&&(e=!0,b.rzsv=d),b.text(d),e&&this.getWidth(b)},setMinAndMax:function(){this.scope.rzSliderFloor?this.minValue=+this.scope.rzSliderFloor:this.minValue=this.scope.rzSliderFloor=0,this.scope.rzSliderCeil?this.maxValue=+this.scope.rzSliderCeil:this.scope.rzSliderCeil=this.maxValue=this.range?this.scope.rzSliderHigh:this.scope.rzSliderModel,this.scope.rzSliderStep&&(this.step=+this.scope.rzSliderStep),this.valueRange=this.maxValue-this.minValue},initElemHandles:function(){angular.forEach(this.sliderElem.children(),function(a,b){var c=angular.element(a);switch(b){case 0:this.fullBar=c;break;case 1:this.selBar=c;break;case 2:this.minH=c;break;case 3:this.maxH=c;break;case 4:this.flrLab=c;break;case 5:this.ceilLab=c;break;case 6:this.minLab=c;break;case 7:this.maxLab=c;break;case 8:this.cmbLab=c}},this),this.selBar.rzsl=0,this.minH.rzsl=0,this.maxH.rzsl=0,this.flrLab.rzsl=0,this.ceilLab.rzsl=0,this.minLab.rzsl=0,this.maxLab.rzsl=0,this.cmbLab.rzsl=0,this.hideLimitLabels&&(this.flrLab.rzAlwaysHide=!0,this.ceilLab.rzAlwaysHide=!0,this.hideEl(this.flrLab),this.hideEl(this.ceilLab)),this.range===!1&&(this.cmbLab.remove(),this.maxLab.remove(),this.maxH.rzAlwaysHide=!0,this.maxH[0].style.zIndex="-1000",this.hideEl(this.maxH)),this.range===!1&&this.alwaysShowBar===!1&&(this.maxH.remove(),this.selBar.remove()),this.dragRange&&(this.selBar.css("cursor","move"),this.selBar.addClass("rz-draggable"))},calcViewDimensions:function(){var a=this.getWidth(this.minH);this.handleHalfWidth=a/2,this.barWidth=this.getWidth(this.fullBar),this.maxLeft=this.barWidth-a,this.getWidth(this.sliderElem),this.sliderElem.rzsl=this.sliderElem[0].getBoundingClientRect().left,this.initHasRun&&(this.updateCeilLab(),this.initHandles())},updateCeilLab:function(){this.translateFn(this.scope.rzSliderCeil,this.ceilLab),this.setLeft(this.ceilLab,this.barWidth-this.ceilLab.rzsw),this.getWidth(this.ceilLab)},updateFloorLab:function(){this.translateFn(this.scope.rzSliderFloor,this.flrLab),this.getWidth(this.flrLab)},callOnStart:function(){if(this.scope.rzSliderOnStart){var b=this;a(function(){b.scope.rzSliderOnStart()})}},callOnChange:function(){if(this.scope.rzSliderOnChange){var b=this;a(function(){b.scope.rzSliderOnChange()})}},callOnEnd:function(){if(this.scope.rzSliderOnEnd){var b=this;a(function(){b.scope.rzSliderOnEnd()})}},updateHandles:function(a,b){return"rzSliderModel"===a?(this.updateLowHandle(b),this.updateSelectionBar(),void(this.range&&this.updateCmbLabel())):"rzSliderHigh"===a?(this.updateHighHandle(b),this.updateSelectionBar(),void(this.range&&this.updateCmbLabel())):(this.updateLowHandle(b),this.updateHighHandle(b),this.updateSelectionBar(),void this.updateCmbLabel())},updateLowHandle:function(a){var b=Math.abs(this.minH.rzsl-a);this.minLab.rzsv&&1>b||(this.setLeft(this.minH,a),this.translateFn(this.scope.rzSliderModel,this.minLab),this.setLeft(this.minLab,a-this.minLab.rzsw/2+this.handleHalfWidth),this.shFloorCeil())},updateHighHandle:function(a){this.setLeft(this.maxH,a),this.translateFn(this.scope.rzSliderHigh,this.maxLab),this.setLeft(this.maxLab,a-this.maxLab.rzsw/2+this.handleHalfWidth),this.shFloorCeil()},shFloorCeil:function(){var a=!1,b=!1;this.minLab.rzsl<=this.flrLab.rzsl+this.flrLab.rzsw+5?(a=!0,this.hideEl(this.flrLab)):(a=!1,this.showEl(this.flrLab)),this.minLab.rzsl+this.minLab.rzsw>=this.ceilLab.rzsl-this.handleHalfWidth-10?(b=!0,this.hideEl(this.ceilLab)):(b=!1,this.showEl(this.ceilLab)),this.range&&(this.maxLab.rzsl+this.maxLab.rzsw>=this.ceilLab.rzsl-10?this.hideEl(this.ceilLab):b||this.showEl(this.ceilLab),this.maxLab.rzsl<=this.flrLab.rzsl+this.flrLab.rzsw+this.handleHalfWidth?this.hideEl(this.flrLab):a||this.showEl(this.flrLab))},updateSelectionBar:function(){this.setWidth(this.selBar,Math.abs(this.maxH.rzsl-this.minH.rzsl)),this.setLeft(this.selBar,this.range?this.minH.rzsl+this.handleHalfWidth:0)},updateCmbLabel:function(){var a,b;this.minLab.rzsl+this.minLab.rzsw+10>=this.maxLab.rzsl?(this.customTrFn?(a=this.customTrFn(this.scope.rzSliderModel),b=this.customTrFn(this.scope.rzSliderHigh)):(a=this.scope.rzSliderModel,b=this.scope.rzSliderHigh),this.translateFn(a+" - "+b,this.cmbLab,!1),this.setLeft(this.cmbLab,this.selBar.rzsl+this.selBar.rzsw/2-this.cmbLab.rzsw/2),this.hideEl(this.minLab),this.hideEl(this.maxLab),this.showEl(this.cmbLab)):(this.showEl(this.maxLab),this.showEl(this.minLab),this.hideEl(this.cmbLab))},roundStep:function(a){var b=this.step,c=+((a-this.minValue)%b).toFixed(3),d=c>b/2?a+b-c:a-c;return d=d.toFixed(this.precision),+d},hideEl:function(a){return a.css({opacity:0})},showEl:function(a){return a.rzAlwaysHide?a:a.css({opacity:1})},setLeft:function(a,b){return a.rzsl=b,a.css({left:b+"px"}),b},getWidth:function(a){var b=a[0].getBoundingClientRect();return a.rzsw=b.right-b.left,a.rzsw},setWidth:function(a,b){return a.rzsw=b,a.css({width:b+"px"}),b},valueToOffset:function(a){return(a-this.minValue)*this.maxLeft/this.valueRange},offsetToValue:function(a){return a/this.maxLeft*this.valueRange+this.minValue},getEventX:function(a){return"clientX"in a?a.clientX:void 0===a.originalEvent?a.touches[0].clientX:a.originalEvent.touches[0].clientX},getNearestHandle:function(a){if(!this.range)return this.minH;var b=this.getEventX(a)-this.sliderElem.rzsl-this.handleHalfWidth;return Math.abs(b-this.minH.rzsl)<Math.abs(b-this.maxH.rzsl)?this.minH:this.maxH},bindEvents:function(){var a,b,c;this.dragRange?(a="rzSliderDrag",b=this.onDragStart,c=this.onDragMove):(a="rzSliderModel",b=this.onStart,c=this.onMove),this.minH.on("mousedown",angular.bind(this,this.onStart,this.minH,"rzSliderModel")),this.range&&this.maxH.on("mousedown",angular.bind(this,this.onStart,this.maxH,"rzSliderHigh")),this.fullBar.on("mousedown",angular.bind(this,this.onStart,null,null)),this.fullBar.on("mousedown",angular.bind(this,this.onMove,this.fullBar)),this.selBar.on("mousedown",angular.bind(this,b,null,a)),this.selBar.on("mousedown",angular.bind(this,c,this.selBar)),this.minH.on("touchstart",angular.bind(this,this.onStart,this.minH,"rzSliderModel")),this.range&&this.maxH.on("touchstart",angular.bind(this,this.onStart,this.maxH,"rzSliderHigh")),this.fullBar.on("touchstart",angular.bind(this,this.onStart,null,null)),this.fullBar.on("touchstart",angular.bind(this,this.onMove,this.fullBar)),this.selBar.on("touchstart",angular.bind(this,b,null,a)),this.selBar.on("touchstart",angular.bind(this,c,this.selBar))},onStart:function(a,c,d){var e,f,g=this.getEventNames(d);d.stopPropagation(),d.preventDefault(),""===this.tracking&&(this.calcViewDimensions(),a?this.tracking=c:(a=this.getNearestHandle(d),this.tracking=a===this.minH?"rzSliderModel":"rzSliderHigh"),a.addClass("rz-active"),e=angular.bind(this,this.dragging.active?this.onDragMove:this.onMove,a),f=angular.bind(this,this.onEnd,e),b.on(g.moveEvent,e),b.one(g.endEvent,f),this.callOnStart())},onMove:function(a,b){var c,d,e,f=this.getEventX(b);if(c=this.sliderElem.rzsl,d=f-c-this.handleHalfWidth,0>=d){if(0===a.rzsl)return;e=this.minValue,d=0}else if(d>=this.maxLeft){if(a.rzsl===this.maxLeft)return;e=this.maxValue,d=this.maxLeft}else e=this.offsetToValue(d),e=this.roundStep(e),d=this.valueToOffset(e);this.positionTrackingHandle(e,d)},onDragStart:function(a,b,c){var d=this.getEventX(c)-this.sliderElem.rzsl-this.handleHalfWidth;this.dragging={active:!0,value:this.offsetToValue(d),difference:this.scope.rzSliderHigh-this.scope.rzSliderModel,offset:d,lowDist:d-this.minH.rzsl,highDist:this.maxH.rzsl-d},this.minH.addClass("rz-active"),this.maxH.addClass("rz-active"),this.onStart(a,b,c)},onDragMove:function(a,b){var c,d,e,f,g=this.getEventX(b)-this.sliderElem.rzsl-this.handleHalfWidth;if(g<=this.dragging.lowDist){if(a.rzsl===this.dragging.lowDist)return;e=this.minValue,c=0,f=this.dragging.difference,d=this.valueToOffset(f)}else if(g>=this.maxLeft-this.dragging.highDist){if(a.rzsl===this.dragging.highDist)return;f=this.maxValue,d=this.maxLeft,e=this.maxValue-this.dragging.difference,c=this.valueToOffset(e)}else e=this.offsetToValue(g-this.dragging.lowDist),e=this.roundStep(e),c=this.valueToOffset(e),f=e+this.dragging.difference,d=this.valueToOffset(f);this.positionTrackingBar(e,f,c,d)},positionTrackingBar:function(a,b,c,d){this.scope.rzSliderModel=a,this.scope.rzSliderHigh=b,this.updateHandles("rzSliderModel",c),this.updateHandles("rzSliderHigh",d),this.scope.$apply(),this.callOnChange()},positionTrackingHandle:function(a,b){this.range&&("rzSliderModel"===this.tracking&&a>=this.scope.rzSliderHigh?(this.scope[this.tracking]=this.scope.rzSliderHigh,this.updateHandles(this.tracking,this.maxH.rzsl),this.tracking="rzSliderHigh",this.minH.removeClass("rz-active"),this.maxH.addClass("rz-active"),this.scope.$apply(),this.callOnChange()):"rzSliderHigh"===this.tracking&&a<=this.scope.rzSliderModel&&(this.scope[this.tracking]=this.scope.rzSliderModel,this.updateHandles(this.tracking,this.minH.rzsl),this.tracking="rzSliderModel",this.maxH.removeClass("rz-active"),this.minH.addClass("rz-active"),this.scope.$apply(),this.callOnChange())),this.scope[this.tracking]!==a&&(this.scope[this.tracking]=a,this.updateHandles(this.tracking,b),this.scope.$apply(),this.callOnChange())},onEnd:function(a,c){var d=this.getEventNames(c).moveEvent;this.minH.removeClass("rz-active"),this.maxH.removeClass("rz-active"),b.off(d,a),this.scope.$emit("slideEnded"),this.tracking="",this.dragging.active=!1,this.callOnEnd()},getEventNames:function(a){var b={moveEvent:"",endEvent:""};return a.touches||void 0!==a.originalEvent&&a.originalEvent.touches?(b.moveEvent="touchmove",b.endEvent="touchend"):(b.moveEvent="mousemove",b.endEvent="mouseup"),b}},e}]).directive("rzslider",["RzSlider",function(a){"use strict";return{restrict:"E",scope:{rzSliderFloor:"=?",rzSliderCeil:"=?",rzSliderStep:"@",rzSliderPrecision:"@",rzSliderModel:"=?",rzSliderHigh:"=?",rzSliderDraggable:"@",rzSliderTranslate:"&",rzSliderHideLimitLabels:"=?",rzSliderAlwaysShowBar:"=?",rzSliderPresentOnly:"@",rzSliderOnStart:"&",rzSliderOnChange:"&",rzSliderOnEnd:"&"},templateUrl:function(a,b){return b.rzSliderTplUrl||"rzSliderTpl.html"},link:function(b,c,d){return new a(b,c,d)}}}]);
\ No newline at end of file
+/*! jusas-angularjs-slider - v0.1.29 - (c) Rafal Zajac <rzajac@gmail.com>, Jussi Saarivirta <jusasi@gmail.com>, Angelin Sirbu <angelin.sirbu@gmail.com>, https://github.com/rzajac/angularjs-slider.git - 2015-09-13 */
+!function(a,b){"function"==typeof define&&define.amd?define(["angular","underscore"],b):"object"==typeof module&&module.exports?module.exports=b(require("angular")):b(a.angular)}(this,function(a){var b=a.module("rzModule",[]).value("throttle",function(a,b,c){"use strict";var d,e,f,g=Date.now||function(){return(new Date).getTime()},h=null,i=0;c=c||{};var j=function(){i=c.leading===!1?0:g(),h=null,f=a.apply(d,e),d=e=null};return function(){var k=g();i||c.leading!==!1||(i=k);var l=b-(k-i);return d=this,e=arguments,0>=l?(clearTimeout(h),h=null,i=k,f=a.apply(d,e),d=e=null):h||c.trailing===!1||(h=setTimeout(j,l)),f}}).factory("RzSlider",["$timeout","$document","$window","throttle",function(b,c,d,e){"use strict";var f=function(a,b,c){this.scope=a,this.attributes=c,this.sliderElem=b,this.range=void 0!==c.rzSliderHigh&&void 0!==c.rzSliderModel,this.dragRange=this.range&&"true"===c.rzSliderDraggableRange,this.dragging={active:!1,value:0,difference:0,offset:0,lowDist:0,highDist:0},this.handleHalfWidth=0,this.alwaysShowBar=!!c.rzSliderAlwaysShowBar,this.maxLeft=0,this.precision=0,this.step=0,this.tracking="",this.minValue=0,this.maxValue=0,this.hideLimitLabels=!!c.rzSliderHideLimitLabels,this.presentOnly="true"===c.rzSliderPresentOnly,this.valueRange=0,this.initHasRun=!1,this.customTrFn=this.scope.rzSliderTranslate()||function(a){return String(a)},this.deRegFuncs=[],this.fullBar=null,this.selBar=null,this.minH=null,this.maxH=null,this.flrLab=null,this.ceilLab=null,this.minLab=null,this.maxLab=null,this.cmbLab=null,this.init()};return f.prototype={init:function(){var c,f,g,h=a.bind(this,this.calcViewDimensions),i=this;this.initElemHandles(),this.calcViewDimensions(),this.setMinAndMax(),this.precision=void 0===this.scope.rzSliderPrecision?0:+this.scope.rzSliderPrecision,this.step=void 0===this.scope.rzSliderStep?1:+this.scope.rzSliderStep,b(function(){i.updateCeilLab(),i.updateFloorLab(),i.initHandles(),i.presentOnly||i.bindEvents()}),g=this.scope.$on("reCalcViewDimensions",h),this.deRegFuncs.push(g),a.element(d).on("resize",h),this.initHasRun=!0,c=e(function(){i.setMinAndMax(),i.updateLowHandle(i.valueToOffset(i.scope.rzSliderModel)),i.updateSelectionBar(),i.range&&i.updateCmbLabel()},350,{leading:!1}),f=e(function(){i.setMinAndMax(),i.updateHighHandle(i.valueToOffset(i.scope.rzSliderHigh)),i.updateSelectionBar(),i.updateCmbLabel()},350,{leading:!1}),this.scope.$on("rzSliderForceRender",function(){i.resetLabelsValue(),c(),i.range&&f(),i.resetSlider()}),g=this.scope.$watch("rzSliderModel",function(a,b){a!==b&&c()}),this.deRegFuncs.push(g),g=this.scope.$watch("rzSliderHigh",function(a,b){a!==b&&f()}),this.deRegFuncs.push(g),this.scope.$watch("rzSliderFloor",function(a,b){a!==b&&i.resetSlider()}),this.deRegFuncs.push(g),g=this.scope.$watch("rzSliderCeil",function(a,b){a!==b&&i.resetSlider()}),this.deRegFuncs.push(g),this.scope.$on("$destroy",function(){i.minH.off(),i.maxH.off(),i.fullBar.off(),i.selBar.off(),a.element(d).off("resize",h),i.deRegFuncs.map(function(a){a()})})},resetSlider:function(){this.setMinAndMax(),this.updateCeilLab(),this.updateFloorLab(),this.calcViewDimensions()},resetLabelsValue:function(){this.minLab.rzsv=void 0,this.maxLab.rzsv=void 0},initHandles:function(){this.updateLowHandle(this.valueToOffset(this.scope.rzSliderModel)),this.range&&(this.updateHighHandle(this.valueToOffset(this.scope.rzSliderHigh)),this.updateCmbLabel()),this.updateSelectionBar()},translateFn:function(a,b,c){c=void 0===c?!0:c;var d=String(c?this.customTrFn(a):a),e=!1;(void 0===b.rzsv||b.rzsv.length!==d.length||b.rzsv.length>0&&0===b.rzsw)&&(e=!0,b.rzsv=d),b.text(d),e&&this.getWidth(b)},setMinAndMax:function(){this.scope.rzSliderFloor?this.minValue=+this.scope.rzSliderFloor:this.minValue=this.scope.rzSliderFloor=0,this.scope.rzSliderCeil?this.maxValue=+this.scope.rzSliderCeil:this.scope.rzSliderCeil=this.maxValue=this.range?this.scope.rzSliderHigh:this.scope.rzSliderModel,this.scope.rzSliderStep&&(this.step=+this.scope.rzSliderStep),this.valueRange=this.maxValue-this.minValue},initElemHandles:function(){a.forEach(this.sliderElem.children(),function(b,c){var d=a.element(b);switch(c){case 0:this.fullBar=d;break;case 1:this.selBar=d;break;case 2:this.minH=d;break;case 3:this.maxH=d;break;case 4:this.flrLab=d;break;case 5:this.ceilLab=d;break;case 6:this.minLab=d;break;case 7:this.maxLab=d;break;case 8:this.cmbLab=d}},this),this.selBar.rzsl=0,this.minH.rzsl=0,this.maxH.rzsl=0,this.flrLab.rzsl=0,this.ceilLab.rzsl=0,this.minLab.rzsl=0,this.maxLab.rzsl=0,this.cmbLab.rzsl=0,this.hideLimitLabels&&(this.flrLab.rzAlwaysHide=!0,this.ceilLab.rzAlwaysHide=!0,this.hideEl(this.flrLab),this.hideEl(this.ceilLab)),this.range===!1&&(this.cmbLab.remove(),this.maxLab.remove(),this.maxH.rzAlwaysHide=!0,this.maxH[0].style.zIndex="-1000",this.hideEl(this.maxH)),this.range===!1&&this.alwaysShowBar===!1&&(this.maxH.remove(),this.selBar.remove()),this.dragRange&&(this.selBar.css("cursor","move"),this.selBar.addClass("rz-draggable"))},calcViewDimensions:function(){var a=this.getWidth(this.minH);this.handleHalfWidth=a/2,this.barWidth=this.getWidth(this.fullBar),this.maxLeft=this.barWidth-a,this.getWidth(this.sliderElem),this.sliderElem.rzsl=this.sliderElem[0].getBoundingClientRect().left,this.initHasRun&&(this.updateCeilLab(),this.initHandles())},updateCeilLab:function(){this.translateFn(this.scope.rzSliderCeil,this.ceilLab),this.setLeft(this.ceilLab,this.barWidth-this.ceilLab.rzsw),this.getWidth(this.ceilLab)},updateFloorLab:function(){this.translateFn(this.scope.rzSliderFloor,this.flrLab),this.getWidth(this.flrLab)},callOnStart:function(){if(this.scope.rzSliderOnStart){var a=this;b(function(){a.scope.rzSliderOnStart()})}},callOnChange:function(){if(this.scope.rzSliderOnChange){var a=this;b(function(){a.scope.rzSliderOnChange()})}},callOnEnd:function(){if(this.scope.rzSliderOnEnd){var a=this;b(function(){a.scope.rzSliderOnEnd()})}},updateHandles:function(a,b){return"rzSliderModel"===a?(this.updateLowHandle(b),this.updateSelectionBar(),void(this.range&&this.updateCmbLabel())):"rzSliderHigh"===a?(this.updateHighHandle(b),this.updateSelectionBar(),void(this.range&&this.updateCmbLabel())):(this.updateLowHandle(b),this.updateHighHandle(b),this.updateSelectionBar(),void this.updateCmbLabel())},updateLowHandle:function(a){var b=Math.abs(this.minH.rzsl-a);this.minLab.rzsv&&1>b||(this.setLeft(this.minH,a),this.translateFn(this.scope.rzSliderModel,this.minLab),this.setLeft(this.minLab,a-this.minLab.rzsw/2+this.handleHalfWidth),this.shFloorCeil())},updateHighHandle:function(a){this.setLeft(this.maxH,a),this.translateFn(this.scope.rzSliderHigh,this.maxLab),this.setLeft(this.maxLab,a-this.maxLab.rzsw/2+this.handleHalfWidth),this.shFloorCeil()},shFloorCeil:function(){var a=!1,b=!1;this.minLab.rzsl<=this.flrLab.rzsl+this.flrLab.rzsw+5?(a=!0,this.hideEl(this.flrLab)):(a=!1,this.showEl(this.flrLab)),this.minLab.rzsl+this.minLab.rzsw>=this.ceilLab.rzsl-this.handleHalfWidth-10?(b=!0,this.hideEl(this.ceilLab)):(b=!1,this.showEl(this.ceilLab)),this.range&&(this.maxLab.rzsl+this.maxLab.rzsw>=this.ceilLab.rzsl-10?this.hideEl(this.ceilLab):b||this.showEl(this.ceilLab),this.maxLab.rzsl<=this.flrLab.rzsl+this.flrLab.rzsw+this.handleHalfWidth?this.hideEl(this.flrLab):a||this.showEl(this.flrLab))},updateSelectionBar:function(){this.setWidth(this.selBar,Math.abs(this.maxH.rzsl-this.minH.rzsl)),this.setLeft(this.selBar,this.range?this.minH.rzsl+this.handleHalfWidth:0)},updateCmbLabel:function(){var a,b;this.minLab.rzsl+this.minLab.rzsw+10>=this.maxLab.rzsl?(this.customTrFn?(a=this.customTrFn(this.scope.rzSliderModel),b=this.customTrFn(this.scope.rzSliderHigh)):(a=this.scope.rzSliderModel,b=this.scope.rzSliderHigh),this.translateFn(a+" - "+b,this.cmbLab,!1),this.setLeft(this.cmbLab,this.selBar.rzsl+this.selBar.rzsw/2-this.cmbLab.rzsw/2),this.hideEl(this.minLab),this.hideEl(this.maxLab),this.showEl(this.cmbLab)):(this.showEl(this.maxLab),this.showEl(this.minLab),this.hideEl(this.cmbLab))},roundStep:function(a){var b=this.step,c=+((a-this.minValue)%b).toFixed(3),d=c>b/2?a+b-c:a-c;return d=d.toFixed(this.precision),+d},hideEl:function(a){return a.css({opacity:0})},showEl:function(a){return a.rzAlwaysHide?a:a.css({opacity:1})},setLeft:function(a,b){return a.rzsl=b,a.css({left:b+"px"}),b},getWidth:function(a){var b=a[0].getBoundingClientRect();return a.rzsw=b.right-b.left,a.rzsw},setWidth:function(a,b){return a.rzsw=b,a.css({width:b+"px"}),b},valueToOffset:function(a){return(a-this.minValue)*this.maxLeft/this.valueRange},offsetToValue:function(a){return a/this.maxLeft*this.valueRange+this.minValue},getEventX:function(a){return"clientX"in a?a.clientX:void 0===a.originalEvent?a.touches[0].clientX:a.originalEvent.touches[0].clientX},getNearestHandle:function(a){if(!this.range)return this.minH;var b=this.getEventX(a)-this.sliderElem.rzsl-this.handleHalfWidth;return Math.abs(b-this.minH.rzsl)<Math.abs(b-this.maxH.rzsl)?this.minH:this.maxH},bindEvents:function(){var b,c,d;this.dragRange?(b="rzSliderDrag",c=this.onDragStart,d=this.onDragMove):(b="rzSliderModel",c=this.onStart,d=this.onMove),this.minH.on("mousedown",a.bind(this,this.onStart,this.minH,"rzSliderModel")),this.range&&this.maxH.on("mousedown",a.bind(this,this.onStart,this.maxH,"rzSliderHigh")),this.fullBar.on("mousedown",a.bind(this,this.onStart,null,null)),this.fullBar.on("mousedown",a.bind(this,this.onMove,this.fullBar)),this.selBar.on("mousedown",a.bind(this,c,null,b)),this.selBar.on("mousedown",a.bind(this,d,this.selBar)),this.minH.on("touchstart",a.bind(this,this.onStart,this.minH,"rzSliderModel")),this.range&&this.maxH.on("touchstart",a.bind(this,this.onStart,this.maxH,"rzSliderHigh")),this.fullBar.on("touchstart",a.bind(this,this.onStart,null,null)),this.fullBar.on("touchstart",a.bind(this,this.onMove,this.fullBar)),this.selBar.on("touchstart",a.bind(this,c,null,b)),this.selBar.on("touchstart",a.bind(this,d,this.selBar))},onStart:function(b,d,e){var f,g,h=this.getEventNames(e);e.stopPropagation(),e.preventDefault(),""===this.tracking&&(this.calcViewDimensions(),b?this.tracking=d:(b=this.getNearestHandle(e),this.tracking=b===this.minH?"rzSliderModel":"rzSliderHigh"),b.addClass("rz-active"),f=a.bind(this,this.dragging.active?this.onDragMove:this.onMove,b),g=a.bind(this,this.onEnd,f),c.on(h.moveEvent,f),c.one(h.endEvent,g),this.callOnStart())},onMove:function(a,b){var c,d,e,f=this.getEventX(b);if(c=this.sliderElem.rzsl,d=f-c-this.handleHalfWidth,0>=d){if(0===a.rzsl)return;e=this.minValue,d=0}else if(d>=this.maxLeft){if(a.rzsl===this.maxLeft)return;e=this.maxValue,d=this.maxLeft}else e=this.offsetToValue(d),e=this.roundStep(e),d=this.valueToOffset(e);this.positionTrackingHandle(e,d)},onDragStart:function(a,b,c){var d=this.getEventX(c)-this.sliderElem.rzsl-this.handleHalfWidth;this.dragging={active:!0,value:this.offsetToValue(d),difference:this.scope.rzSliderHigh-this.scope.rzSliderModel,offset:d,lowDist:d-this.minH.rzsl,highDist:this.maxH.rzsl-d},this.minH.addClass("rz-active"),this.maxH.addClass("rz-active"),this.onStart(a,b,c)},onDragMove:function(a,b){var c,d,e,f,g=this.getEventX(b)-this.sliderElem.rzsl-this.handleHalfWidth;if(g<=this.dragging.lowDist){if(a.rzsl===this.dragging.lowDist)return;e=this.minValue,c=0,f=this.dragging.difference,d=this.valueToOffset(f)}else if(g>=this.maxLeft-this.dragging.highDist){if(a.rzsl===this.dragging.highDist)return;f=this.maxValue,d=this.maxLeft,e=this.maxValue-this.dragging.difference,c=this.valueToOffset(e)}else e=this.offsetToValue(g-this.dragging.lowDist),e=this.roundStep(e),c=this.valueToOffset(e),f=e+this.dragging.difference,d=this.valueToOffset(f);this.positionTrackingBar(e,f,c,d)},positionTrackingBar:function(a,b,c,d){this.scope.rzSliderModel=a,this.scope.rzSliderHigh=b,this.updateHandles("rzSliderModel",c),this.updateHandles("rzSliderHigh",d),this.scope.$apply(),this.callOnChange()},positionTrackingHandle:function(a,b){this.range&&("rzSliderModel"===this.tracking&&a>=this.scope.rzSliderHigh?(this.scope[this.tracking]=this.scope.rzSliderHigh,this.updateHandles(this.tracking,this.maxH.rzsl),this.tracking="rzSliderHigh",this.minH.removeClass("rz-active"),this.maxH.addClass("rz-active"),this.scope.$apply(),this.callOnChange()):"rzSliderHigh"===this.tracking&&a<=this.scope.rzSliderModel&&(this.scope[this.tracking]=this.scope.rzSliderModel,this.updateHandles(this.tracking,this.minH.rzsl),this.tracking="rzSliderModel",this.maxH.removeClass("rz-active"),this.minH.addClass("rz-active"),this.scope.$apply(),this.callOnChange())),this.scope[this.tracking]!==a&&(this.scope[this.tracking]=a,this.updateHandles(this.tracking,b),this.scope.$apply(),this.callOnChange())},onEnd:function(a,b){var d=this.getEventNames(b).moveEvent;this.minH.removeClass("rz-active"),this.maxH.removeClass("rz-active"),c.off(d,a),this.scope.$emit("slideEnded"),this.tracking="",this.dragging.active=!1,this.callOnEnd()},getEventNames:function(a){var b={moveEvent:"",endEvent:""};return a.touches||void 0!==a.originalEvent&&a.originalEvent.touches?(b.moveEvent="touchmove",b.endEvent="touchend"):(b.moveEvent="mousemove",b.endEvent="mouseup"),b}},f}]).directive("rzslider",["RzSlider",function(a){"use strict";return{restrict:"E",scope:{rzSliderFloor:"=?",rzSliderCeil:"=?",rzSliderStep:"@",rzSliderPrecision:"@",rzSliderModel:"=?",rzSliderHigh:"=?",rzSliderDraggable:"@",rzSliderTranslate:"&",rzSliderHideLimitLabels:"=?",rzSliderAlwaysShowBar:"=?",rzSliderPresentOnly:"@",rzSliderOnStart:"&",rzSliderOnChange:"&",rzSliderOnEnd:"&"},templateUrl:function(a,b){return b.rzSliderTplUrl||"rzSliderTpl.html"},link:function(b,c,d){return new a(b,c,d)}}}]);return b.run(["$templateCache",function(a){"use strict";a.put("rzSliderTpl.html",'<span class=rz-bar-wrapper><span class=rz-bar></span></span> <span class=rz-bar-wrapper><span class="rz-bar rz-selection"></span></span> <span class=rz-pointer></span> <span class=rz-pointer></span> <span class="rz-bubble rz-limit"></span> <span class="rz-bubble rz-limit"></span> <span class=rz-bubble></span> <span class=rz-bubble></span> <span class=rz-bubble></span>')}]),b});
\ No newline at end of file

package.json

@@ -13,9 +13,12 @@
   ],
   "devDependencies": {
     "grunt": "~0.4.2",
+    "grunt-angular-templates": "^0.5.7",
     "grunt-contrib-mincss": "~0.3.2",
     "grunt-contrib-uglify": "~0.2.2",
+    "grunt-ng-annotate": "^1.0.1",
     "grunt-recess": "~0.4.0",
+    "grunt-replace": "^0.11.0",
     "recess": "~1.1.9"
   },
   "author": "Rafal Zajac <rzajac@gmail.com>, Jussi Saarivirta <jusasi@gmail.com>, Angelin Sirbu <angelin.sirbu@gmail.com>",

src/rzSliderTpl.html

+<span class="rz-bar-wrapper"><span class="rz-bar"></span></span> <!-- // 0 The slider bar -->
+<span class="rz-bar-wrapper"><span class="rz-bar rz-selection"></span></span> <!-- // 1 Highlight between two handles -->
+<span class="rz-pointer"></span> <!-- // 2 Left slider handle -->
+<span class="rz-pointer"></span> <!-- // 3 Right slider handle -->
+<span class="rz-bubble rz-limit"></span> <!-- // 4 Floor label -->
+<span class="rz-bubble rz-limit"></span> <!-- // 5 Ceiling label -->
+<span class="rz-bubble"></span> <!-- // 6 Label above left slider handle -->
+<span class="rz-bubble"></span> <!-- // 7 Label above right slider handle -->
+<span class="rz-bubble"></span> <!-- // 8 Range label when the slider handles are close ex. 15 - 17 -->
\ No newline at end of file

rzslider.js → src/rzslider.js

@@ -11,22 +11,25 @@
 
 /*jslint unparam: true */
 /*global angular: false, console: false */
-
-angular.module('rzModule', [])
-
-.run(['$templateCache', function($templateCache) {
-  'use strict';
-  var template = '<span class="rz-bar-wrapper"><span class="rz-bar"></span></span>' + // 0 The slider bar
-              '<span class="rz-bar-wrapper"><span class="rz-bar rz-selection"></span></span>' + // 1 Highlight between two handles
-              '<span class="rz-pointer"></span>' + // 2 Left slider handle
-              '<span class="rz-pointer"></span>' + // 3 Right slider handle
-              '<span class="rz-bubble rz-limit"></span>' + // 4 Floor label
-              '<span class="rz-bubble rz-limit"></span>' + // 5 Ceiling label
-              '<span class="rz-bubble"></span>' + // 6 Label above left slider handle
-              '<span class="rz-bubble"></span>' + // 7 Label above right slider handle
-              '<span class="rz-bubble"></span>'; // 8 Range label when the slider handles are close ex. 15 - 17
-  $templateCache.put('rzSliderTpl.html', template);
-}])
+(function (root, factory) {
+
+  if (typeof define === 'function' && define.amd) {
+    // AMD. Register as an anonymous module.
+    define(['angular', 'underscore'], factory);
+  } else if (typeof module === 'object' && module.exports) {
+    // Node. Does not work with strict CommonJS, but
+    // only CommonJS-like environments that support module.exports,
+    // like Node.
+    // to support bundler like browserify
+    module.exports = factory(require('angular'));
+  } else {
+    // Browser globals (root is window)
+    factory(root.angular);
+  }
+
+}(this, function (angular) {
+
+var module = angular.module('rzModule', [])
 
 .value('throttle',
   /**
@@ -73,7 +76,7 @@ function throttle(func, wait, options) {
   };
 })
 
-.factory('RzSlider', ['$timeout', '$document', '$window', 'throttle', function($timeout, $document, $window, throttle)
+.factory('RzSlider', function($timeout, $document, $window, throttle)
 {
   'use strict';
 
@@ -1241,9 +1244,9 @@ function throttle(func, wait, options) {
   };
 
   return Slider;
-}])
+})
 
-.directive('rzslider', ['RzSlider', function(Slider)
+.directive('rzslider', function(RzSlider)
 {
   'use strict';
 
@@ -1280,10 +1283,10 @@ function throttle(func, wait, options) {
 
     link: function(scope, elem, attr)
     {
-      return new Slider(scope, elem, attr);
+      return new RzSlider(scope, elem, attr);
     }
   };
-}]);
+});
 
 // IDE assist
 
@@ -1317,3 +1320,8 @@ function throttle(func, wait, options) {
  * @property {bool} leading
  * @property {bool} trailing
  */
+
+  /*templateReplacement*/
+
+  return module
+}));