fixed compatibility with material lib 1.1

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>"

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) {

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;
 }

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>
+</html>

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"

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) {

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;
         }
       }
     }
   }
-}
+}