diff --git a/src/components/slider/slider.js b/src/components/slider/slider.js
index 9dbcce42e0f..68d494fb5db 100644
--- 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:
- '
' +
- '
' +
- '
' +
- '
' +
- '
' +
- '' +
- '
' +
- '
' +
- '
' +
- '
' +
- '' +
- '
' +
- '
' +
- '
',
+ '\
+
\
+
\
+
\
+
\
+
\
+
\
+ \
+
\
+
\
+
\
+
',
link: postLink
};
@@ -85,7 +87,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'));
@@ -270,8 +272,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);
}
diff --git a/src/components/slider/slider.scss b/src/components/slider/slider.scss
index 96f80e8c2fa..f4b9c83daea 100644
--- 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,9 +89,8 @@ md-slider {
.md-thumb-container {
position: absolute;
left: 0;
- top: 0;
- right: 0;
- transform: translate3d(0,0,0);
+ top: 50%;
+ transform: translate3d(-50%,-50%,0);
transition: transform 0.1s linear;
}
.md-thumb {