Merge pull request #105 from coxm/above-range-click

On click, move the handle closest to the event

dist/rzslider.min.css

-/*! jusas-angularjs-slider - v0.1.25 - (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-08-19 */
+/*! jusas-angularjs-slider - v0.1.25 - (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-08-20 */
 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

rzslider.js

@@ -900,6 +900,19 @@ function throttle(func, wait, options) {
           : 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
      *
@@ -924,25 +937,25 @@ function throttle(func, wait, options) {
 
       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, this.minH, 'rzSliderModel'));
+      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, this.minH, barTracking));
+      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, this.minH, 'rzSliderModel'));
+      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, this.minH, barTracking));
+      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
-     * @param {string} ref     One of the refLow, refHigh values
-     * @param {Event}  event   The event
+     * @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)
@@ -958,7 +971,16 @@ function throttle(func, wait, options) {
       // We have to do this in case the HTML where the sliders are on
       // have been animated into view.
       this.calcViewDimensions();
-      this.tracking = ref;
+
+      if(pointer)
+      {
+        this.tracking = ref;
+      }
+      else
+      {
+        pointer = this.getNearestHandle(event);
+        this.tracking = pointer === this.minH ? 'rzSliderModel' : 'rzSliderHigh';
+      }
 
       pointer.addClass('rz-active');