From 6111e1ae9b2b4f6f2bd6931fbc2b0a9e1a6c5ad8 Mon Sep 17 00:00:00 2001
From: Armando Barbosa <armandobs14@gmail.com>
Date: Wed, 8 Feb 2017 20:25:26 -0300
Subject: [PATCH] enabling md-discrete and little style improvements

---
 dist/md-range-slider.js     | 27 +++++++++++++++++----------
 dist/md-range-slider.min.js |  2 +-
 dist/style.css              |  4 ++--
 dist/style.min.css          |  2 +-
 example/index.html          |  4 ++--
 src/module.js               | 26 ++++++++++++++++----------
 src/style.less              |  2 +-
 7 files changed, 40 insertions(+), 27 deletions(-)

diff --git a/dist/md-range-slider.js b/dist/md-range-slider.js
index 96128dd..5d95d4a 100644
--- a/dist/md-range-slider.js
+++ b/dist/md-range-slider.js
@@ -55,25 +55,32 @@
   }]);
 
   module.directive('rangeSlider', function () {
+    function templateFactory(elem,attr){
+      
+      var discrete = (attr.hasOwnProperty('mdDiscrete')) ? 'md-discrete={{mdDiscrete}}' :'';
+      return [
+        '<div class="range-slider-container">',
+          '<div class="range-slider-left">',
+            '<md-slider '+discrete+' aria-label="upperValue" step="{{step}}" ng-model="lowerValue" min="{{min}}" max="{{lowerMax}}"></md-slider>',
+          '</div>',
+          '<div class="range-slider-right" ng-style="{width: upperWidth}">',
+            '<md-slider '+discrete+' aria-label="upperValue" step="{{step}}" ng-model="upperValue" min="{{upperMin}}" max="{{max}}"></md-slider>',
+          '</div>',
+        '</div>'
+      ].join('');
+    }
+
     return {
       scope      : {
         max:'=',
         min:'=',
         minGap: '=',
         step:'=',
+        mdDiscrete: "=mdDiscrete",
         lowerValue: "=lowerValue",
         upperValue: "=upperValue"
       },
-      template: [
-        '<div class="range-slider-container">',
-          '<div class="range-slider-left">',
-            '<md-slider aria-label="upperValue" step="{{step}}" ng-model="lowerValue" min="{{min}}" max="{{lowerMax}}"></md-slider>',
-          '</div>',
-          '<div class="range-slider-right" ng-style="{width: upperWidth}">',
-            '<md-slider aria-label="upperValue" step="{{step}}" ng-model="upperValue" min="{{upperMin}}" max="{{max}}"></md-slider>',
-          '</div>',
-        '</div>'
-      ].join(''),
+      template: templateFactory ,
       controller: 'RangeSliderController'
     };
   });
diff --git a/dist/md-range-slider.min.js b/dist/md-range-slider.min.js
index baefb9f..1a12f7d 100644
--- a/dist/md-range-slider.min.js
+++ b/dist/md-range-slider.min.js
@@ -1 +1 @@
-!function(e){"use strict";e.controller("RangeSliderController",["$scope",function(e){function l(){e.lowerMax=e.max-e.step,e.upperMin=e.lowerValue+e.step,!e.lowerValue||e.lowerValue<e.min?e.lowerValue=e.min:e.lowerValue*=1,!e.upperValue||e.upperValue>e.max?e.upperValue=e.max:e.upperValue*=1,p()}function a(){return e.lowerValue>=e.upperValue-e.step?void(e.lowerValue=e.upperValue-e.step):(e.upperMin=e.lowerValue+e.step,void p())}function r(){e.upperValue<=e.lowerValue+e.step&&(e.upperValue=e.lowerValue+e.step)}function p(){e.upperWidth=(e.max-(e.lowerValue+e.step))/(e.max-e.min)*100+"%",e.lowerValue>e.upperValue-e.minGap&&e.upperValue<e.max&&(e.upperValue=e.lowerValue+e.minGap)}e.step||(e.step=1),e.minGap||(e.minGap=e.step),e.$watchGroup(["min","max"],l),e.$watch("lowerValue",a),e.$watch("upperValue",r)}]),e.directive("rangeSlider",function(){return{scope:{max:"=",min:"=",minGap:"=",step:"=",lowerValue:"=lowerValue",upperValue:"=upperValue"},template:['<div class="range-slider-container">','<div class="range-slider-left">','<md-slider aria-label="upperValue" step="{{step}}" ng-model="lowerValue" min="{{min}}" max="{{lowerMax}}"></md-slider>',"</div>",'<div class="range-slider-right" ng-style="{width: upperWidth}">','<md-slider aria-label="upperValue" step="{{step}}" ng-model="upperValue" min="{{upperMin}}" max="{{max}}"></md-slider>',"</div>","</div>"].join(""),controller:"RangeSliderController"}})}(angular.module("mdRangeSlider",["ngMaterial"]));
\ No newline at end of file
+!function(e){"use strict";e.controller("RangeSliderController",["$scope",function(e){function l(){e.lowerMax=e.max-e.step,e.upperMin=e.lowerValue+e.step,!e.lowerValue||e.lowerValue<e.min?e.lowerValue=e.min:e.lowerValue*=1,!e.upperValue||e.upperValue>e.max?e.upperValue=e.max:e.upperValue*=1,u()}function r(){return e.lowerValue>=e.upperValue-e.step?void(e.lowerValue=e.upperValue-e.step):(e.upperMin=e.lowerValue+e.step,void u())}function a(){e.upperValue<=e.lowerValue+e.step&&(e.upperValue=e.lowerValue+e.step)}function u(){e.upperWidth=(e.max-(e.lowerValue+e.step))/(e.max-e.min)*100+"%",e.lowerValue>e.upperValue-e.minGap&&e.upperValue<e.max&&(e.upperValue=e.lowerValue+e.minGap)}e.step||(e.step=1),e.minGap||(e.minGap=e.step),e.$watchGroup(["min","max"],l),e.$watch("lowerValue",r),e.$watch("upperValue",a)}]),e.directive("rangeSlider",function(){function e(e,l){var r=l.mdDiscrete?"md-discrete={{mdDiscrete}}":"";return['<div class="range-slider-container">','<div class="range-slider-left">',"<md-slider "+r+' aria-label="upperValue" step="{{step}}" ng-model="lowerValue" min="{{min}}" max="{{lowerMax}}"></md-slider>',"</div>",'<div class="range-slider-right" ng-style="{width: upperWidth}">',"<md-slider "+r+' aria-label="upperValue" step="{{step}}" ng-model="upperValue" min="{{upperMin}}" max="{{max}}"></md-slider>',"</div>","</div>"].join("")}return{scope:{max:"=",min:"=",minGap:"=",step:"=",mdDiscrete:"=mdDiscrete",lowerValue:"=lowerValue",upperValue:"=upperValue"},template:e,controller:"RangeSliderController"}})}(angular.module("mdRangeSlider",["ngMaterial"]));
\ No newline at end of file
diff --git a/dist/style.css b/dist/style.css
index d4dfe45..7bdf24c 100644
--- a/dist/style.css
+++ b/dist/style.css
@@ -15,7 +15,7 @@
   z-index: 10;
 }
 .range-slider-left md-slider .md-track {
-  background-color: #3d4450;
+  background-color: #FF4081;
 }
 .range-slider-left md-slider .md-track.md-track-fill {
   background-color: #9e9e9e;
@@ -36,6 +36,6 @@
   background-color: #9e9e9e;
 }
 .range-slider-right md-slider .md-track-container .md-track.md-track-fill {
-  background-color: #3d4450;
+  background-color: #FF4081;
   transition: none;
 }
diff --git a/dist/style.min.css b/dist/style.min.css
index 703451e..f78f510 100644
--- a/dist/style.min.css
+++ b/dist/style.min.css
@@ -1 +1 @@
-.range-slider-left md-slider,.range-slider-right md-slider{min-width:0}.range-slider-container{position:relative;width:100%;height:48px}.range-slider-left{position:absolute;top:0;width:100%}.range-slider-left md-slider .md-thumb-container{z-index:10}.range-slider-left md-slider .md-track{background-color:#3d4450}.range-slider-left md-slider .md-track.md-track-fill,.range-slider-right md-slider .md-track-container .md-track{background-color:#9e9e9e}.range-slider-right{position:absolute;top:0;right:0}.range-slider-right md-slider .md-thumb-container{transition:-webkit-transform 0s linear;transition:transform 0s linear}.range-slider-right md-slider .md-track-container .md-track.md-track-fill{background-color:#3d4450;transition:none}
\ No newline at end of file
+.range-slider-left md-slider,.range-slider-right md-slider{min-width:0}.range-slider-container{position:relative;width:100%;height:48px}.range-slider-left{position:absolute;top:0;width:100%}.range-slider-left md-slider .md-thumb-container{z-index:10}.range-slider-left md-slider .md-track{background-color:#FF4081}.range-slider-left md-slider .md-track.md-track-fill,.range-slider-right md-slider .md-track-container .md-track{background-color:#9e9e9e}.range-slider-right{position:absolute;top:0;right:0}.range-slider-right md-slider .md-thumb-container{transition:-webkit-transform 0s linear;transition:transform 0s linear}.range-slider-right md-slider .md-track-container .md-track.md-track-fill{background-color:#FF4081;transition:none}
\ No newline at end of file
diff --git a/example/index.html b/example/index.html
index 9102b38..fe5a374 100644
--- a/example/index.html
+++ b/example/index.html
@@ -1,6 +1,6 @@
 <html>
 <head>
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.js" type="text/javascript"></script>
+  <script src="../bower_components/angular/angular.js" type="text/javascript"></script>
   <script src="../bower_components/angular-animate/angular-animate.js"></script>
   <script src="../bower_components/angular-aria/angular-aria.js"></script>
   <script src="../bower_components/angular-material/angular-material.js"></script>
@@ -13,7 +13,7 @@
     <div style="width:300px;margin:auto;" ng-controller="AppController">
       <h3>Filter by price</h3>
       <p>Selected range: {{lower|currency}}-{{upper|currency}}</p>
-      <range-slider lower-value="lower" upper-value="upper" min-gap="2000" step="100" min="min" max="max" ></range-slider>
+      <range-slider md-discrete lower-value="lower" upper-value="upper" min-gap="2000" step="100" min="min" max="max" ></range-slider>
     </div>
 	<div style="width:300px;margin:auto;" ng-controller="App2Controller">
       <h3>Filter by age</h3>
diff --git a/src/module.js b/src/module.js
index 96128dd..b3086e2 100644
--- a/src/module.js
+++ b/src/module.js
@@ -55,25 +55,31 @@
   }]);
 
   module.directive('rangeSlider', function () {
+    function templateFactory(elem,attr){
+      var discrete = (attr.hasOwnProperty('mdDiscrete')) ? 'md-discrete={{mdDiscrete}}' :'';
+      return [
+        '<div class="range-slider-container">',
+          '<div class="range-slider-left">',
+            '<md-slider '+discrete+' aria-label="upperValue" step="{{step}}" ng-model="lowerValue" min="{{min}}" max="{{lowerMax}}"></md-slider>',
+          '</div>',
+          '<div class="range-slider-right" ng-style="{width: upperWidth}">',
+            '<md-slider '+discrete+' aria-label="upperValue" step="{{step}}" ng-model="upperValue" min="{{upperMin}}" max="{{max}}"></md-slider>',
+          '</div>',
+        '</div>'
+      ].join('');
+    }
+
     return {
       scope      : {
         max:'=',
         min:'=',
         minGap: '=',
         step:'=',
+        mdDiscrete: "=mdDiscrete",
         lowerValue: "=lowerValue",
         upperValue: "=upperValue"
       },
-      template: [
-        '<div class="range-slider-container">',
-          '<div class="range-slider-left">',
-            '<md-slider aria-label="upperValue" step="{{step}}" ng-model="lowerValue" min="{{min}}" max="{{lowerMax}}"></md-slider>',
-          '</div>',
-          '<div class="range-slider-right" ng-style="{width: upperWidth}">',
-            '<md-slider aria-label="upperValue" step="{{step}}" ng-model="upperValue" min="{{upperMin}}" max="{{max}}"></md-slider>',
-          '</div>',
-        '</div>'
-      ].join(''),
+      template: templateFactory ,
       controller: 'RangeSliderController'
     };
   });
diff --git a/src/style.less b/src/style.less
index 2ad2b0e..60693f9 100644
--- a/src/style.less
+++ b/src/style.less
@@ -1,5 +1,5 @@
 @range-slider-bg: rgb(158, 158, 158);
-@range-slider-highlight: rgb(61,68,80);
+@range-slider-highlight: #FF4081;
 
 .range-slider-container {
   position:relative;