From 7d7f621747358061edc810189e0edcb28740100d Mon Sep 17 00:00:00 2001
From: Domas Trijonis <domas.trijonis@gmail.com>
Date: Tue, 30 Aug 2016 22:26:28 +0200
Subject: [PATCH] fixed compatibility with material lib 1.1

---
 bower.json                  |  2 +-
 dist/md-range-slider.js     | 10 ++++++++++
 dist/md-range-slider.min.js |  2 +-
 dist/style.css              | 13 +++++++------
 dist/style.min.css          |  2 +-
 example/index.html          |  6 +++---
 package.json                |  2 +-
 src/module.js               | 10 ++++++++++
 src/style.less              | 17 +++++++++--------
 9 files changed, 43 insertions(+), 21 deletions(-)

diff --git a/bower.json b/bower.json
index 8567648..9908005 100644
--- a/bower.json
+++ b/bower.json
@@ -1,7 +1,7 @@
 {
   "name": "mdRangeSlider",
   "main": "dist/md-range-slider.js",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "homepage": "https://github.com/FDIM/ng-md-range-slider.git",
   "authors": [
     "FDIM <domas.trijonis@gmail.com>"
diff --git a/dist/md-range-slider.js b/dist/md-range-slider.js
index 753d907..96128dd 100644
--- a/dist/md-range-slider.js
+++ b/dist/md-range-slider.js
@@ -6,8 +6,12 @@
     if(!$scope.step){
       $scope.step = 1;
     }
+    if(!$scope.minGap){
+      $scope.minGap = $scope.step;
+    }
     $scope.$watchGroup(['min','max'],minMaxWatcher);
     $scope.$watch('lowerValue',lowerValueWatcher);
+    $scope.$watch('upperValue',upperValueWatcher);
 
     function minMaxWatcher() {
       $scope.lowerMax = $scope.max - $scope.step;
@@ -36,6 +40,12 @@
       updateWidth();
     }
 
+    function upperValueWatcher() {
+      if($scope.upperValue <= $scope.lowerValue + $scope.step){
+        $scope.upperValue = $scope.lowerValue + $scope.step;
+      }
+    }
+
     function updateWidth() {
       $scope.upperWidth = ((($scope.max-($scope.lowerValue + $scope.step))/($scope.max-$scope.min)) * 100) + "%";
       if($scope.lowerValue > ($scope.upperValue - $scope.minGap) && $scope.upperValue < $scope.max) {
diff --git a/dist/md-range-slider.min.js b/dist/md-range-slider.min.js
index 8aa3fca..baefb9f 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,a()}function r(){return e.lowerValue>=e.upperValue-e.step?void(e.lowerValue=e.upperValue-e.step):(e.upperMin=e.lowerValue+e.step,void a())}function a(){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.$watchGroup(["min","max"],l),e.$watch("lowerValue",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,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
diff --git a/dist/style.css b/dist/style.css
index 5ecde67..d4dfe45 100644
--- a/dist/style.css
+++ b/dist/style.css
@@ -11,13 +11,13 @@
 .range-slider-left md-slider {
   min-width: 0px;
 }
-.range-slider-left md-slider ._md-thumb-container {
+.range-slider-left md-slider .md-thumb-container {
   z-index: 10;
 }
-.range-slider-left md-slider ._md-track {
+.range-slider-left md-slider .md-track {
   background-color: #3d4450;
 }
-.range-slider-left md-slider ._md-track._md-track-fill {
+.range-slider-left md-slider .md-track.md-track-fill {
   background-color: #9e9e9e;
 }
 .range-slider-right {
@@ -28,13 +28,14 @@
 .range-slider-right md-slider {
   min-width: 0px;
 }
-.range-slider-right md-slider ._md-thumb-container {
+.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 {
+.range-slider-right md-slider .md-track-container .md-track {
   background-color: #9e9e9e;
 }
-.range-slider-right md-slider ._md-track-container ._md-track._md-track-fill {
+.range-slider-right md-slider .md-track-container .md-track.md-track-fill {
   background-color: #3d4450;
+  transition: none;
 }
diff --git a/dist/style.min.css b/dist/style.min.css
index 9a076e7..703451e 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}
\ 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:#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
diff --git a/example/index.html b/example/index.html
index 6051fb5..9102b38 100644
--- a/example/index.html
+++ b/example/index.html
@@ -18,7 +18,7 @@ <h3>Filter by price</h3>
 	<div style="width:300px;margin:auto;" ng-controller="App2Controller">
       <h3>Filter by age</h3>
       <p>Selected range: {{lower}}-{{upper}}</p>
-      <range-slider lower-value="lower" upper-value="upper" min-gap="1" step="1" min="min" max="max" ></range-slider>
+      <range-slider lower-value="lower" upper-value="upper" min-gap="2" step="2" min="min" max="max" ></range-slider>
       <input type="number" placeholder="Min" ng-model="min"/>
       <input type="number" placeholder="Max" ng-model="max"/>
     </div>
@@ -37,8 +37,8 @@ <h3>Filter by age</h3>
       $scope.lower = $scope.min;
       $scope.upper = $scope.max;
     }]);
-    
+
     angular.bootstrap(document, ['example']);
   </script>
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/package.json b/package.json
index b3cbc8a..0e17cb6 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "mdRangeSlider",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "main": "dist/md-range-slider.js",
   "scripts": {
     "test": "gulp coverage"
diff --git a/src/module.js b/src/module.js
index 753d907..96128dd 100644
--- a/src/module.js
+++ b/src/module.js
@@ -6,8 +6,12 @@
     if(!$scope.step){
       $scope.step = 1;
     }
+    if(!$scope.minGap){
+      $scope.minGap = $scope.step;
+    }
     $scope.$watchGroup(['min','max'],minMaxWatcher);
     $scope.$watch('lowerValue',lowerValueWatcher);
+    $scope.$watch('upperValue',upperValueWatcher);
 
     function minMaxWatcher() {
       $scope.lowerMax = $scope.max - $scope.step;
@@ -36,6 +40,12 @@
       updateWidth();
     }
 
+    function upperValueWatcher() {
+      if($scope.upperValue <= $scope.lowerValue + $scope.step){
+        $scope.upperValue = $scope.lowerValue + $scope.step;
+      }
+    }
+
     function updateWidth() {
       $scope.upperWidth = ((($scope.max-($scope.lowerValue + $scope.step))/($scope.max-$scope.min)) * 100) + "%";
       if($scope.lowerValue > ($scope.upperValue - $scope.minGap) && $scope.upperValue < $scope.max) {
diff --git a/src/style.less b/src/style.less
index d185985..2ad2b0e 100644
--- a/src/style.less
+++ b/src/style.less
@@ -13,12 +13,12 @@
   width:100%;
   md-slider{
     min-width: 0px;
-    ._md-thumb-container{
+    .md-thumb-container{
       z-index: 10;
     }
-    ._md-track{
+    .md-track{
       background-color: @range-slider-highlight;
-      &._md-track-fill{
+      &.md-track-fill{
         background-color: @range-slider-bg;
       }
     }
@@ -32,17 +32,18 @@
   md-slider{
     min-width: 0px;
     // Overwrite specific to range adaptation
-    ._md-thumb-container {
+    .md-thumb-container {
       transition: -webkit-transform 0s linear;
       transition: transform 0s linear;
     }
-    ._md-track-container{
-      ._md-track{
+    .md-track-container{
+      .md-track{
         background-color: @range-slider-bg;
-        &._md-track-fill{
+        &.md-track-fill{
           background-color: @range-slider-highlight;
+          transition: none;
         }
       }
     }
   }
-}
\ No newline at end of file
+}