fix(slider): constraints value between min and max

src/lib/slider/slider.spec.ts

@@ -23,6 +23,9 @@ describe('MdSlider', () => {
         SliderWithSetTickInterval,
         SliderWithThumbLabel,
         SliderWithTwoWayBinding,
+        SliderWithValueSmallerThanMin,
+        SliderWithValueGreaterThanMax,
+        SliderWithValueBetweenMinAndMax
       ],
       providers: [
         {provide: HAMMER_GESTURE_CONFIG, useFactory: () => {
@@ -621,6 +624,82 @@ describe('MdSlider', () => {
 
     // TODO: Add tests for ng-pristine, ng-touched, ng-invalid.
   });
+
+  describe('slider with set min and max and a value smaller than min', () => {
+    let fixture: ComponentFixture<SliderWithValueSmallerThanMin>;
+    let sliderDebugElement: DebugElement;
+    let sliderNativeElement: HTMLElement;
+    let sliderInstance: MdSlider;
+    let sliderTrackElement: HTMLElement;
+    let sliderDimensions: ClientRect;
+    let thumbElement: HTMLElement;
+    let thumbDimensions: ClientRect;
+
+    beforeEach(() => {
+
+      fixture = TestBed.createComponent(SliderWithValueSmallerThanMin);
+      fixture.detectChanges();
+
+      sliderDebugElement = fixture.debugElement.query(By.directive(MdSlider));
+      sliderNativeElement = sliderDebugElement.nativeElement;
+      sliderInstance = sliderDebugElement.componentInstance;
+
+      sliderTrackElement = <HTMLElement>sliderNativeElement.querySelector('.md-slider-track');
+      sliderDimensions = sliderTrackElement.getBoundingClientRect();
+
+      thumbElement = <HTMLElement>sliderNativeElement.querySelector('.md-slider-thumb-position');
+      thumbDimensions = thumbElement.getBoundingClientRect();
+    });
+
+    it('should set the value smaller than the min value', () => {
+      expect(sliderInstance.value).toBe(3);
+      expect(sliderInstance.min).toBe(4);
+      expect(sliderInstance.max).toBe(6);
+    });
+
+    it('should place the thumb on the min value', () => {
+      thumbDimensions = thumbElement.getBoundingClientRect();
+      expect(thumbDimensions.left).toBe(sliderDimensions.left);
+    });
+  });
+
+  describe('slider with set min and max and a value greater than max', () => {
+    let fixture: ComponentFixture<SliderWithValueSmallerThanMin>;
+    let sliderDebugElement: DebugElement;
+    let sliderNativeElement: HTMLElement;
+    let sliderInstance: MdSlider;
+    let sliderTrackElement: HTMLElement;
+    let sliderDimensions: ClientRect;
+    let thumbElement: HTMLElement;
+    let thumbDimensions: ClientRect;
+
+    beforeEach(() => {
+      fixture = TestBed.createComponent(SliderWithValueGreaterThanMax);
+      fixture.detectChanges();
+
+      sliderDebugElement = fixture.debugElement.query(By.directive(MdSlider));
+      sliderNativeElement = sliderDebugElement.nativeElement;
+      sliderInstance = sliderDebugElement.componentInstance;
+
+      sliderTrackElement = <HTMLElement>sliderNativeElement.querySelector('.md-slider-track');
+      sliderDimensions = sliderTrackElement.getBoundingClientRect();
+
+      thumbElement = <HTMLElement>sliderNativeElement.querySelector('.md-slider-thumb-position');
+      thumbDimensions = thumbElement.getBoundingClientRect();
+
+    });
+
+    it('should set the value greater than the max value', () => {
+      expect(sliderInstance.value).toBe(7);
+      expect(sliderInstance.min).toBe(4);
+      expect(sliderInstance.max).toBe(6);
+    });
+
+    it('should place the thumb on the max value', () => {
+      thumbDimensions = thumbElement.getBoundingClientRect();
+      expect(thumbDimensions.left).toBe(sliderDimensions.right);
+    });
+  });
 });
 
 // The transition has to be removed in order to test the updated positions without setTimeout.
@@ -678,6 +757,27 @@ class SliderWithTwoWayBinding {
   control = new FormControl('');
 }
 
+@Component({
+  template: `<md-slider value="3" min="4" max="6"></md-slider>`,
+  styles: [noTransitionStyle],
+  encapsulation: ViewEncapsulation.None
+})
+class SliderWithValueSmallerThanMin { }
+
+@Component({
+  template: `<md-slider value="7" min="4" max="6"></md-slider>`,
+  styles: [noTransitionStyle],
+  encapsulation: ViewEncapsulation.None
+})
+class SliderWithValueGreaterThanMax { }
+
+@Component({
+  template: `<md-slider value="5" min="4" max="6"></md-slider>`,
+  styles: [noTransitionStyle],
+  encapsulation: ViewEncapsulation.None
+})
+class SliderWithValueBetweenMinAndMax { }
+
 /**
  * Dispatches a click event from an element.
  * Note: The mouse event truncates the position for the click.

src/lib/slider/slider.ts

@@ -265,7 +265,8 @@ export class MdSlider implements AfterContentInit, ControlValueAccessor {
    */
   snapThumbToValue() {
     this.updatePercentFromValue();
-    this._renderer.updateThumbAndFillPosition(this._percent, this._sliderDimensions.width);
+    let renderedPercent = this.clamp(this._percent);
+    this._renderer.updateThumbAndFillPosition(renderedPercent, this._sliderDimensions.width);
   }
 
   /**