diff --git a/src/components/slider/slider.js b/src/components/slider/slider.js
index e81b033ee3a..de34f8120b0 100644
--- a/src/components/slider/slider.js
+++ b/src/components/slider/slider.js
@@ -74,7 +74,7 @@ function SliderDirective($mdTheming) {
'
' +
'' +
'' +
- '' +
+ '' +
'
' +
'' +
'',
@@ -108,6 +108,7 @@ function SliderController(scope, element, attr, $$rAF, $window, $mdEffects, $mdA
this.init = function init(ngModelCtrl) {
var thumb = angular.element(element[0].querySelector('.md-thumb'));
+ var thumbText = angular.element(element[0].querySelector('.md-thumb-text'));
var thumbContainer = thumb.parent();
var trackContainer = angular.element(element[0].querySelector('.md-track-container'));
var activeTrack = angular.element(element[0].querySelector('.md-track-fill'));
@@ -381,7 +382,10 @@ function SliderController(scope, element, attr, $$rAF, $window, $mdEffects, $mdA
* @param x
*/
function adjustThumbPosition( x ) {
+ var exactVal = percentToValue( positionToPercent( x ));
+ var closestVal = minMaxValidator( stepValidator(exactVal) );
setSliderPercent( positionToPercent(x) );
+ thumbText.text( closestVal );
}
/**
diff --git a/src/components/slider/slider.spec.js b/src/components/slider/slider.spec.js
index 28b9d165c08..b7b4f6deaaf 100644
--- a/src/components/slider/slider.spec.js
+++ b/src/components/slider/slider.spec.js
@@ -41,6 +41,24 @@ describe('md-slider', function() {
expect($rootScope.value).toBe(50);
}));
+ it('should set model on drag', inject(function($compile, $rootScope, $timeout) {
+ var slider = $compile('')($rootScope);
+ $rootScope.$apply('value = 50');
+ var sliderCtrl = slider.controller('mdSlider');
+
+ spyOn(slider[0].querySelector('.md-track-container'), 'getBoundingClientRect').andReturn({
+ width: 100,
+ left: 0,
+ right: 0
+ });
+
+ sliderCtrl._onInput( simulateEventAt( 30, Hammer.INPUT_START ));
+ $timeout.flush();
+
+ sliderCtrl._onPan( simulateEventAt( 80 ));
+ expect(slider[0].querySelector('.md-thumb-text').textContent).toBe('80');
+ }));
+
it('should increment model on right arrow', inject(function($compile, $rootScope, $timeout, $mdConstant) {
var slider = $compile(
''