Merge pull request #203 from angular-slider/draggableRangeOnly

Add a draggableRangeOnly options.

Author: ValentinH

README.md

@@ -206,7 +206,9 @@ $scope.slider = {
 
 **stepsArray** - _Array_: If you want to display a slider with non linear/number steps. Just pass an array with each slider value and that's it; the floor, ceil and step settings of the slider will be computed automatically. The `rz-slider-model` value will be the index of the selected item in the stepsArray.
 
-**draggableRange** - _Boolean (defaults to false)_: When set to true and using a range slider, the range can be dragged by the selection bar. _This doesn't work when ticks are shown._
+**draggableRange** - _Boolean (defaults to false)_: When set to true and using a range slider, the range can be dragged by the selection bar.
+
+**draggableRangeOnly** - _Boolean (defaults to false)_: Same as draggableRange but the slider range can't be changed.
 
 **showSelectionBar** - _Boolean (defaults to false)_: Set to true to always show the selection bar.
 

demo/demo.js

@@ -139,6 +139,17 @@ app.controller('MainCtrl', function($scope, $rootScope, $timeout, $modal) {
     }
   };
 
+  //Slider with draggable range only
+  $scope.slider_draggable_range_only = {
+    minValue: 4,
+    maxValue: 6,
+    options: {
+      ceil: 10,
+      floor: 0,
+      draggableRangeOnly: true
+    }
+  };
+
   //Vertical sliders
   $scope.verticalSlider1 = {
     value: 0,

demo/index.html

@@ -123,6 +123,15 @@ <h2>Slider with draggable range</h2>
     ></rzslider>
   </article>
 
+  <article>
+    <h2>Slider with draggable range only</h2>
+    <rzslider
+      rz-slider-model="slider_draggable_range_only.minValue"
+      rz-slider-high="slider_draggable_range_only.maxValue"
+      rz-slider-options="slider_draggable_range_only.options"
+    ></rzslider>
+  </article>
+
   <article>
     <h2>Vertical sliders</h2>
     <div class="row vertical-sliders" style="margin: 20px;">

dist/rzslider.css

@@ -1,7 +1,12 @@
-/*! angularjs-slider - v2.2.0 - 
- (c) Rafal Zajac <rzajac@gmail.com>, Valentin Hervieu <valentin@hervieu.me>, Jussi Saarivirta <jusasi@gmail.com>, Angelin Sirbu <angelin.sirbu@gmail.com> - 
- https://github.com/angular-slider/angularjs-slider - 
- 2015-12-21 */
+/**
+ * Angular JS slider directive
+ *
+ * (c) Rafal Zajac <rzajac@gmail.com>
+ * http://github.com/rzajac/angularjs-slider
+ *
+ * Licensed under the MIT license
+ */
+
 rzslider {
   position: relative;
   display: inline-block;
@@ -126,6 +131,7 @@ rzslider .rz-ticks {
   display: -ms-flexbox;
   display: flex;
   width: 100%;
+  height: 0;
   padding: 0 11px;
   margin: 0;
   list-style: none;
@@ -206,7 +212,7 @@ rzslider.vertical .rz-ticks {
   top: 0;
   left: -3px;
   z-index: 1;
-  width: auto;
+  width: 0;
   height: 100%;
   padding: 11px 0;
   -webkit-flex-direction: column-reverse;

dist/rzslider.js

@@ -34,6 +34,7 @@
       translate: null,
       stepsArray: null,
       draggableRange: false,
+      draggableRangeOnly: false,
       showSelectionBar: false,
       hideLimitLabels: false,
       readOnly: false,
@@ -292,9 +293,6 @@
         // Recalculate stuff if view port dimensions have changed
         angular.element($window).on('resize', calcDimFn);
 
-        if (this.options.vertical)
-          this.sliderElem.addClass('vertical');
-
         this.initHasRun = true;
 
         // Watch for changes to the model
@@ -369,8 +367,14 @@
 
         if (this.options.step <= 0)
           this.options.step = 1;
+
         this.range = this.scope.rzSliderModel !== undefined && this.scope.rzSliderHigh !== undefined;
         this.options.draggableRange = this.range && this.options.draggableRange;
+        this.options.draggableRangeOnly = this.range && this.options.draggableRangeOnly;
+        if (this.options.draggableRangeOnly) {
+          this.options.draggableRange = true;
+        }
+
         this.options.showTicks = this.options.showTicks || this.options.showTicksValues;
         this.scope.showTicks = this.options.showTicks; //scope is used in the template
 
@@ -486,6 +490,9 @@
         this.alwaysHide(this.cmbLab, this.options.showTicksValues || !this.range);
         this.alwaysHide(this.selBar, !this.range && !this.options.showSelectionBar);
 
+        if (this.options.vertical)
+          this.sliderElem.addClass('vertical');
+
         if (this.options.draggableRange)
           this.selBar.addClass('rz-draggable');
         else
@@ -1143,27 +1150,42 @@
           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.ticks.on('mousedown', angular.bind(this, this.onStart, null, null));
-        this.ticks.on('mousedown', angular.bind(this, this.onMove, this.ticks));
 
-        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'));
+        if (this.options.draggableRangeOnly) {
+          this.minH.on('mousedown', angular.bind(this, barStart, null, barTracking));
+          if (this.range) {
+            this.maxH.on('mousedown', angular.bind(this, barStart, null, barTracking));
+          }
+        } else {
+          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.ticks.on('mousedown', angular.bind(this, this.onStart, null, null));
+          this.ticks.on('mousedown', angular.bind(this, this.onMove, this.ticks));
         }
-        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));
-        this.ticks.on('touchstart', angular.bind(this, this.onStart, null, null));
-        this.ticks.on('touchstart', angular.bind(this, this.onMove, this.ticks));
+        if (this.options.draggableRangeOnly) {
+          this.minH.on('touchstart', angular.bind(this, barStart, null, barTracking));
+          if (this.range) {
+            this.maxH.on('touchstart', angular.bind(this, barStart, null, barTracking));
+          }
+        } else {
+          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.ticks.on('touchstart', angular.bind(this, this.onStart, null, null));
+          this.ticks.on('touchstart', angular.bind(this, this.onMove, this.ticks));
+        }
 
         if (this.options.keyboardSupport) {
           this.minH.on('focus', angular.bind(this, this.onPointerFocus, this.minH, 'rzSliderModel'));
@@ -1319,7 +1341,27 @@
 
         var newValue = this.roundStep(this.sanitizeValue(action)),
           newOffset = this.valueToOffset(newValue);
-        this.positionTrackingHandle(newValue, newOffset);
+        if (!this.options.draggableRangeOnly) {
+          this.positionTrackingHandle(newValue, newOffset);
+        } else {
+          var difference = this.scope.rzSliderHigh - this.scope.rzSliderModel,
+            newMinOffset, newMaxOffset,
+            newMinValue, newMaxValue;
+          if (this.tracking === 'rzSliderModel') {
+            newMinValue = newValue;
+            newMinOffset = newOffset;
+            newMaxValue = newValue + difference;
+            if (newMaxValue > this.maxValue) return;
+            newMaxOffset = this.valueToOffset(newMaxValue);
+          } else {
+            newMaxValue = newValue;
+            newMaxOffset = newOffset;
+            newMinValue = newValue - difference;
+            if (newMinValue < this.minValue) return;
+            newMinOffset = this.valueToOffset(newMinValue);
+          }
+          this.positionTrackingBar(newMinValue, newMaxValue, newMinOffset, newMaxOffset);
+        }
       },
 
       /**
@@ -1342,8 +1384,6 @@
           lowDist: offset - this.minH.rzsp,
           highDist: this.maxH.rzsp - offset
         };
-        this.minH.addClass('rz-active');
-        this.maxH.addClass('rz-active');
 
         this.onStart(pointer, ref, event);
       },