fix(slider): updates positioning method to prevent overflow issues

Create separate models for demos of themeing classes with sliders. Closes #1343 Closes #1431 Closes #1391
angular · Feb 10, 2015 · fb3623a · fb3623a
1 parent 4e930ed
commit fb3623a
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 25 deletions.
diff --git a/src/components/slider/demoBasicUsage/index.html b/src/components/slider/demoBasicUsage/index.html
@@ -44,21 +44,21 @@ <h3>Rating: {{rating}}/5 - demo of theming classes</h3>
       <div flex="10" layout layout-align="center center">
         <span>default</span>
       </div>
-      <md-slider flex md-discrete ng-model="rating" step="1" min="1" max="5" aria-label="rating">
+      <md-slider flex md-discrete ng-model="rating1" step="1" min="1" max="5" aria-label="rating">
       </md-slider>
     </div>
     <div layout>
       <div flex="10" layout layout-align="center center">
         <span>md-warn</span>
       </div>
-      <md-slider flex class="md-warn" md-discrete ng-model="rating" step="1" min="1" max="5" aria-label="rating">
+      <md-slider flex class="md-warn" md-discrete ng-model="rating2" step="1" min="1" max="5" aria-label="rating">
       </md-slider>
     </div>
     <div layout>
       <div flex="10" layout layout-align="center center">
         <span>md-primary</span>
       </div>
-      <md-slider flex class="md-primary" md-discrete ng-model="rating" step="1" min="1" max="5" aria-label="rating">
+      <md-slider flex class="md-primary" md-discrete ng-model="rating3" step="1" min="1" max="5" aria-label="rating">
       </md-slider>
     </div>
 

diff --git a/src/components/slider/demoBasicUsage/script.js b/src/components/slider/demoBasicUsage/script.js
@@ -9,7 +9,7 @@ angular.module('sliderDemo1', ['ngMaterial'])
     blue: Math.floor(Math.random() * 255)
   };
 
-  $scope.rating = 3;
+  $scope.rating1 = $scope.rating2 = $scope.rating3 = 3;
   $scope.disabled1 = 0;
   $scope.disabled2 = 70;
 

diff --git a/src/components/slider/slider.js b/src/components/slider/slider.js
@@ -53,20 +53,22 @@ function SliderDirective($$rAF, $window, $mdAria, $mdUtil, $mdConstant, $mdThemi
     scope: {},
     require: '?ngModel',
     template:
-      '<div class="md-track-container">' +
-      '<div class="md-track"></div>' +
-      '<div class="md-track md-track-fill"></div>' +
-      '<div class="md-track-ticks"></div>' +
-      '</div>' +
-      '<div class="md-thumb-container">' +
-      '<div class="md-thumb"></div>' +
-      '<div class="md-focus-thumb"></div>' +
-      '<div class="md-focus-ring"></div>' +
-      '<div class="md-sign">' +
-      '<span class="md-thumb-text"></span>' +
-      '</div>' +
-      '<div class="md-disabled-thumb"></div>' +
-      '</div>',
+      '<div class="md-slider-wrapper">\
+        <div class="md-track-container">\
+          <div class="md-track"></div>\
+          <div class="md-track md-track-fill"></div>\
+          <div class="md-track-ticks"></div>\
+        </div>\
+        <div class="md-thumb-container">\
+          <div class="md-thumb"></div>\
+          <div class="md-focus-thumb"></div>\
+          <div class="md-focus-ring"></div>\
+          <div class="md-sign">\
+            <span class="md-thumb-text"></span>\
+          </div>\
+          <div class="md-disabled-thumb"></div>\
+        </div>\
+      </div>',
     compile: compile
   };
 
@@ -100,7 +102,7 @@ function SliderDirective($$rAF, $window, $mdAria, $mdUtil, $mdConstant, $mdThemi
     };
 
     var isDisabledParsed = attr.ngDisabled && $parse(attr.ngDisabled);
-    var isDisabledGetter = isDisabledParsed ? 
+    var isDisabledGetter = isDisabledParsed ?
       function() { return isDisabledParsed(scope.$parent); } :
       angular.noop;
     var thumb = angular.element(element[0].querySelector('.md-thumb'));
@@ -280,8 +282,8 @@ function SliderDirective($$rAF, $window, $mdAria, $mdUtil, $mdConstant, $mdThemi
     function setSliderPercent(percent) {
       activeTrack.css('width', (percent * 100) + '%');
       thumbContainer.css(
-        $mdConstant.CSS.TRANSFORM,
-        'translate3d(' + (percent * 100) + '%,0,0)'
+        'left',
+        (percent * 100) + '%'
       );
       element.toggleClass('md-min', percent === 0);
     }
@@ -316,6 +318,7 @@ function SliderDirective($$rAF, $window, $mdAria, $mdUtil, $mdConstant, $mdThemi
       var closestVal = minMaxValidator( stepValidator(exactVal) );
       scope.$apply(function() {
         setModelValue(closestVal);
+        ngModelRender();
       });
     }
     function onDragStart(ev) {

diff --git a/src/components/slider/slider.scss b/src/components/slider/slider.scss
@@ -52,6 +52,11 @@ md-slider {
   display: block;
   margin-left: 4px;
   margin-right: 4px;
+  padding: 0;
+
+  .md-slider-wrapper {
+    position: relative;
+  }
 
   /**
    * Track
@@ -84,10 +89,9 @@ md-slider {
   .md-thumb-container {
     position: absolute;
     left: 0;
-    top: 0;
-    right: 0;
-    transform: translate3d(0,0,0);
-    transition: transform 0.1s linear;
+    top: 50%;
+    transform: translate3d(-50%,-50%,0);
+    transition: left 0.1s linear;
   }
   .md-thumb {
     z-index: 1;