Fix #26

README.md

@@ -94,6 +94,10 @@ $scope.priceSlider = {
 
 > Set to true to hide min / max labels
 
+**rz-slider-always-show-bar**
+
+> Set to true to always show selection bar
+
 **rz-slider-translate**
 
 > Custom translate function. Use this if you want to translate values displayed on the slider. For example if you want to display dollar amounts instead of just numbers do this:

bower.json

 {
   "name": "angularjs-slider",
-  "version": "0.1.11",
+  "version": "0.1.12",
   "homepage": "https://github.com/rzajac/angularjs-slider",
   "authors": [
     "Rafal Zajac <rzajac@gmail.com>",

demo/demo.css

@@ -4,3 +4,4 @@ header { background: #0db9f0; color: #fff; margin: -40px; margin-bottom: 40px; t
 h1 { font-weight: 300; }
 .wrapper { background: #fff; padding: 40px; }
 article { margin-bottom: 40px; }
+

demo/index.html

@@ -33,7 +33,7 @@
         </article>
 
         <article>
-            <h2>One value slider example</h2>
+            <h2>Currency slider example</h2>
 
             Value: {{ priceSlider2 | json }}
             <rzslider
@@ -44,12 +44,13 @@
         </article>
 
         <article>
-            <h2>Currency slider example</h2>
+            <h2>One value slider example</h2>
 
-            Value: {{ priceSlider2 | json }}
+            Value: {{ priceSlider3 | json }}
             <rzslider rz-slider-model="priceSlider3"
                 rz-slider-floor="50"
-                rz-slider-ceil="450"></rzslider>
+                rz-slider-ceil="450"
+                rz-slider-always-show-bar="true"></rzslider>
         </article>
 
         <article>

dist/rzslider.min.css

-/*! jusas-angularjs-slider - v0.1.11 - (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-05-22 */
+/*! jusas-angularjs-slider - v0.1.12 - (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-05-22 */
 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{z-index:0;width:100%;height:100%;background:#d8e0f3;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px}rzslider span.rz-bar.rz-selection{z-index:1;width:0;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

package.json

 {
   "name": "jusas-angularjs-slider",
-  "version": "0.1.11",
+  "version": "0.1.12",
   "description": "AngularJS slider directive with no external dependencies. Mobile friendly!.",
   "main": "rzslider.js",
   "repository": {

rzslider.js

@@ -4,7 +4,7 @@
  * (c) Rafal Zajac <rzajac@gmail.com>
  * http://github.com/rzajac/angularjs-slider
  *
- * Version: v0.1.11
+ * Version: v0.1.12
  *
  * Licensed under the MIT license
  */
@@ -31,7 +31,7 @@ function throttle(func, wait, options) {
   var context, args, result;
   var timeout = null;
   var previous = 0;
-  options || (options = {});
+  options = options || {};
   var later = function() {
     previous = options.leading === false ? 0 : getTime();
     timeout = null;
@@ -104,6 +104,13 @@ function throttle(func, wait, options) {
      */
     this.handleHalfWidth = 0;
 
+    /**
+     * Always show selection bar
+     *
+     * @type {string|boolean}
+     */
+    this.alwaysShowBar = attributes.rzSliderAlwaysShowBar || false;
+
     /**
      * Maximum left the slider handle can have
      *
@@ -237,10 +244,10 @@ function throttle(func, wait, options) {
       {
         self.setMinAndMax();
         self.updateLowHandle(self.valueToOffset(self.scope.rzSliderModel));
+        self.updateSelectionBar();
 
         if(self.range)
         {
-          self.updateSelectionBar();
           self.updateCmbLabel();
         }
 
@@ -340,9 +347,10 @@ function throttle(func, wait, options) {
       if(this.range)
       {
         this.updateHighHandle(this.valueToOffset(this.scope.rzSliderHigh));
-        this.updateSelectionBar();
         this.updateCmbLabel();
       }
+
+      this.updateSelectionBar();
     },
 
     /**
@@ -453,6 +461,10 @@ function throttle(func, wait, options) {
         this.cmbLab.remove();
         this.maxLab.remove();
         this.maxH.remove();
+      }
+
+      if( !this.range && !this.alwaysShowBar)
+      {
         this.selBar.remove();
       }
     },
@@ -517,9 +529,10 @@ function throttle(func, wait, options) {
       if(which === 'rzSliderModel')
       {
         this.updateLowHandle(newOffset);
+        this.updateSelectionBar();
+
         if(this.range)
         {
-          this.updateSelectionBar();
           this.updateCmbLabel();
         }
         return;
@@ -528,9 +541,10 @@ function throttle(func, wait, options) {
       if(which === 'rzSliderHigh')
       {
         this.updateHighHandle(newOffset);
+        this.updateSelectionBar();
+
         if(this.range)
         {
-          this.updateSelectionBar();
           this.updateCmbLabel();
         }
         return;
@@ -634,8 +648,8 @@ function throttle(func, wait, options) {
      */
     updateSelectionBar: function()
     {
-      this.setWidth(this.selBar, this.maxH.rzsl - this.minH.rzsl);
-      this.setLeft(this.selBar, this.minH.rzsl + this.handleHalfWidth);
+      this.setWidth(this.selBar, Math.abs(this.maxH.rzsl - this.minH.rzsl));
+      this.setLeft(this.selBar, this.range ? this.minH.rzsl + this.handleHalfWidth : 0);
     },
 
     /**
@@ -938,7 +952,8 @@ function throttle(func, wait, options) {
       rzSliderModel: '=?',
       rzSliderHigh: '=?',
       rzSliderTranslate: '&',
-      rzSliderHideLimitLabels: '=?'
+      rzSliderHideLimitLabels: '=?',
+      rzSliderAlwaysShowBar: '=?'
     },
     template:   '<span class="rz-bar"></span>' + // 0 The slider bar
                 '<span class="rz-bar rz-selection"></span>' + // 1 Highlight between two handles
@@ -980,6 +995,7 @@ function throttle(func, wait, options) {
 /**
  * @name Event
  * @property {Array} touches
+ * @property {Event} originalEvent
  */
 
 /**