feat(onlyBindHandles): Add an onlyBindHandles option.

Set to true to only bind events on slider handles.

README.md

@@ -175,6 +175,7 @@ The default options are:
     keyboardSupport: true,
     scale: 1,
     enforceRange: false,
+    onlyBindHandles: false,
     onStart: null,
     onChange: null,
     onEnd: null
@@ -242,6 +243,8 @@ $scope.slider = {
 
 **enforceRange** - _Boolean (defaults to false)_: Set to true to round the `rzSliderModel` and `rzSliderHigh` to the slider range even when modified from outside the slider. When set to false, if the model values are modified from outside the slider, they are not rounded but they are still rendered properly on the slider.
 
+**onlyBindHandles** - _Boolean (defaults to false)_: Set to true to only bind events on slider handles.
+
 **onStart** - _Function(sliderId)_: Function to be called when a slider update is started. If an id was set in the options, then it's passed to this callback.
 
 **onChange** - _Function(sliderId)_: Function to be called when rz-slider-model or rz-slider-high change. If an id was set in the options, then it's passed to this callback.

dist/rzslider.js

@@ -49,6 +49,7 @@
       keyboardSupport: true,
       scale: 1,
       enforceRange: false,
+      onlyBindHandles: false,
       onStart: null,
       onChange: null,
       onEnd: null
@@ -1197,8 +1198,10 @@
           barMove = this.onMove;
         }
 
-        this.selBar.on('mousedown', angular.bind(this, barStart, null, barTracking));
-        this.selBar.on('mousedown', angular.bind(this, barMove, this.selBar));
+        if (!this.options.onlyBindHandles) {
+          this.selBar.on('mousedown', angular.bind(this, barStart, null, barTracking));
+          this.selBar.on('mousedown', angular.bind(this, barMove, this.selBar));
+        }
 
         if (this.options.draggableRangeOnly) {
           this.minH.on('mousedown', angular.bind(this, barStart, null, barTracking));
@@ -1208,14 +1211,18 @@
           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));
+          if (!this.options.onlyBindHandles) {
+            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.selBar.on('touchstart', angular.bind(this, barStart, null, barTracking));
-        this.selBar.on('touchstart', angular.bind(this, barMove, this.selBar));
+        if (!this.options.onlyBindHandles) {
+          this.selBar.on('touchstart', angular.bind(this, barStart, null, barTracking));
+          this.selBar.on('touchstart', angular.bind(this, barMove, this.selBar));
+        }
         if (this.options.draggableRangeOnly) {
           this.minH.on('touchstart', angular.bind(this, barStart, null, barTracking));
           this.maxH.on('touchstart', angular.bind(this, barStart, null, barTracking));
@@ -1224,10 +1231,12 @@
           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.onlyBindHandles) {
+            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) {

src/rzslider.js

@@ -53,6 +53,7 @@
       keyboardSupport: true,
       scale: 1,
       enforceRange: false,
+      onlyBindHandles: false,
       onStart: null,
       onChange: null,
       onEnd: null
@@ -1201,8 +1202,10 @@
           barMove = this.onMove;
         }
 
-        this.selBar.on('mousedown', angular.bind(this, barStart, null, barTracking));
-        this.selBar.on('mousedown', angular.bind(this, barMove, this.selBar));
+        if (!this.options.onlyBindHandles) {
+          this.selBar.on('mousedown', angular.bind(this, barStart, null, barTracking));
+          this.selBar.on('mousedown', angular.bind(this, barMove, this.selBar));
+        }
 
         if (this.options.draggableRangeOnly) {
           this.minH.on('mousedown', angular.bind(this, barStart, null, barTracking));
@@ -1212,14 +1215,18 @@
           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));
+          if (!this.options.onlyBindHandles) {
+            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.selBar.on('touchstart', angular.bind(this, barStart, null, barTracking));
-        this.selBar.on('touchstart', angular.bind(this, barMove, this.selBar));
+        if (!this.options.onlyBindHandles) {
+          this.selBar.on('touchstart', angular.bind(this, barStart, null, barTracking));
+          this.selBar.on('touchstart', angular.bind(this, barMove, this.selBar));
+        }
         if (this.options.draggableRangeOnly) {
           this.minH.on('touchstart', angular.bind(this, barStart, null, barTracking));
           this.maxH.on('touchstart', angular.bind(this, barStart, null, barTracking));
@@ -1228,10 +1235,12 @@
           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.onlyBindHandles) {
+            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) {

tests/spec/rz-slider-service-test.js

@@ -2606,18 +2606,49 @@ describe('rzslider - ', function() {
       expect(scope.slider.max).to.equal(100);
       expect(slider.tracking).to.equal('rzSliderModel');
     });
+  });
 
-    it('should a working positionTrackingBar', function() {
-      var newMin = 50,
-        newMax = 90,
-        minOffset = slider.valueToOffset(newMin),
-        maxOffset = slider.valueToOffset(newMax);
-      slider.positionTrackingBar(newMin, newMax, minOffset, maxOffset);
+  describe('single horizontal slider - ', function() {
+    beforeEach(function() {
+      var sliderConf = {
+        value: 0,
+        options: {
+          floor: 0,
+          ceil: 100,
+          showTicks: true,
+          onlyBindHandles: true
+        }
+      };
+      createSlider(sliderConf);
+    });
+    afterEach(function() {
+      // to clean document listener
+      fireMouseup();
+    });
 
-      expect(scope.slider.min).to.equal(50);
-      expect(scope.slider.max).to.equal(90);
-      expect(slider.minH.css('left')).to.equal(minOffset + 'px');
-      expect(slider.maxH.css('left')).to.equal(maxOffset + 'px');
+    it('should handle click and drag on minH correctly when mouse is on the middle', function() {
+      sinon.spy(slider, 'positionTrackingHandle');
+      sinon.spy(slider, 'callOnChange');
+      var event = fireMousedown(slider.minH, 0);
+      var expectedValue = 50,
+        offset = slider.valueToOffset(expectedValue) + slider.handleHalfDim + slider.sliderElem.rzsp;
+      fireMousemove(offset);
+      expect(scope.slider.value).to.equal(expectedValue);
+      slider.positionTrackingHandle.called.should.be.true;
+      slider.callOnChange.called.should.be.true;
+    });
+
+    it('should do nothing when a click happen on another element than the handle', function() {
+      scope.slider.value = 100;
+      scope.$digest();
+
+      sinon.spy(slider, 'positionTrackingHandle');
+      fireMousedown(slider.selBar, 0);
+      fireMousedown(slider.fullBar, 0);
+      fireMousedown(slider.ticks, 0);
+
+      expect(scope.slider.value).to.equal(100);
+      slider.positionTrackingHandle.called.should.be.false;
     });
   });