Merge pull request #69 from ValentinH/support-clicks-on-bar

Support clicks on bar

dist/rzslider.css

@@ -32,10 +32,18 @@ rzslider span.rz-base {
   padding: 0;
 }
 
+rzslider span.rz-bar-wrapper {
+  width: 100%;
+  height: 32px;
+  padding-top: 16px;
+  margin-top: -16px;
+  box-sizing: border-box;
+}
+
 rzslider span.rz-bar {
   z-index: 0;
   width: 100%;
-  height: 100%;
+  height: 4px;
   background: #d8e0f3;
   -webkit-border-radius: 2px;
      -moz-border-radius: 2px;

dist/rzslider.min.css

-/*! jusas-angularjs-slider - v0.1.21 - (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-06-01 */
-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}
+/*! jusas-angularjs-slider - v0.1.21 - (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-06-05 */
+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{width:100%;height:32px;padding-top:16px;margin-top:-16px;box-sizing:border-box}rzslider span.rz-bar{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;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

rzslider.js

@@ -16,7 +16,7 @@ angular.module('rzModule', [])
 
 .run(['$templateCache', function($templateCache) {
   'use strict';
-  var template = '<span class="rz-bar"></span>' + // 0 The slider bar
+  var template = '<span class="rz-bar-wrapper"><span class="rz-bar"></span></span>' + // 0 The slider bar
               '<span class="rz-bar rz-selection"></span>' + // 1 Highlight between two handles
               '<span class="rz-pointer"></span>' + // 2 Left slider handle
               '<span class="rz-pointer"></span>' + // 3 Right slider handle
@@ -848,9 +848,17 @@ 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.fullBar, 'rzSliderModel'));
+      this.fullBar.on('mousedown', angular.bind(this, this.onMove, this.fullBar));
+      this.selBar.on('mousedown', angular.bind(this, this.onStart, this.selBar, 'rzSliderModel'));
+      this.selBar.on('mousedown', angular.bind(this, this.onMove, 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.fullBar, 'rzSliderModel'));
+      this.fullBar.on('touchstart', angular.bind(this, this.onMove, this.fullBar));
+      this.selBar.on('touchstart', angular.bind(this, this.onStart, this.selBar, 'rzSliderModel'));
+      this.selBar.on('touchstart', angular.bind(this, this.onMove, this.selBar));
     },
 
     /**

rzslider.less

@@ -50,9 +50,17 @@ rzslider span.rz-base {
   padding: 0;
 }
 
+rzslider span.rz-bar-wrapper {
+  box-sizing: border-box;
+  margin-top: -@handleSize / 2;
+  padding-top: @handleSize / 2;
+  width: 100%;
+  height: @handleSize;
+}
+
 rzslider span.rz-bar {
   width: 100%;
-  height: 100%;
+  height: @barHeight;
   z-index: 0;
   background: @barNormalColor;
   .rounded(@barHeight/2);