enabling md-discrete and little style improvements

FDIM · Feb 8, 2017 · 6111e1a · 6111e1a
1 parent 7d7f621
commit 6111e1a
Show file tree

Hide file tree

Showing 7 changed files with 40 additions and 27 deletions.
diff --git 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
diff --git 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
diff --git 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
@@ -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
@@ -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;