fix(module:slider): fix reverse slider value with min and max (#5814)

NG-ZORRO · Sep 22, 2020 · fa46a79 · fa46a79
1 parent 451a569
commit fa46a79
Show file tree

Hide file tree

Showing 2 changed files with 65 additions and 10 deletions.
diff --git a/components/slider/slider.component.ts b/components/slider/slider.component.ts
@@ -325,7 +325,7 @@ export class NzSliderComponent implements ControlValueAccessor, OnInit, OnChange
   }
 
   private getLogicalValue(value: number): number {
-    return this.nzReverse ? this.nzMax - value : value;
+    return this.nzReverse ? this.nzMax - value + this.nzMin : value;
   }
 
   private onDragEnd(): void {

diff --git a/components/slider/slider.spec.ts b/components/slider/slider.spec.ts
@@ -534,6 +534,35 @@ describe('nz-slider', () => {
     });
   });
 
+  describe('reverse and min and max', () => {
+    let testBed: ComponentBed<ReverseSliderWithMinAndMaxComponent>;
+    let fixture: ComponentFixture<ReverseSliderWithMinAndMaxComponent>;
+
+    beforeEach(() => {
+      testBed = createComponentBed(ReverseSliderWithMinAndMaxComponent, {
+        imports: [NzSliderModule, FormsModule, ReactiveFormsModule, NoopAnimationsModule]
+      });
+      fixture = testBed.fixture;
+      fixture.detectChanges();
+
+      getReferenceFromFixture(fixture);
+    });
+
+    it('should set the correct maximum value', () => {
+      dispatchClickEventSequence(sliderNativeElement, 0);
+      fixture.detectChanges();
+
+      expect(sliderInstance.value).toEqual(6);
+    });
+
+    it('should set the correct minimum value', () => {
+      dispatchClickEventSequence(sliderNativeElement, 1);
+      fixture.detectChanges();
+
+      expect(sliderInstance.value).toEqual(4);
+    });
+  });
+
   describe('mixed usage', () => {
     let testBed: ComponentBed<MixedSliderComponent>;
     let fixture: ComponentFixture<MixedSliderComponent>;
@@ -786,14 +815,18 @@ const styles = `
 `;
 
 @Component({
-  template: ` <nz-slider [nzDisabled]="disabled"></nz-slider> `,
+  template: `
+    <nz-slider [nzDisabled]="disabled"></nz-slider>
+  `,
   styles: [styles]
 })
 class NzTestSliderComponent {
   disabled = false;
 }
 @Component({
-  template: ` <nz-slider [nzMin]="min" [nzMax]="max"></nz-slider> `,
+  template: `
+    <nz-slider [nzMin]="min" [nzMax]="max"></nz-slider>
+  `,
   styles: [styles]
 })
 class SliderWithMinAndMaxComponent {
@@ -802,33 +835,43 @@ class SliderWithMinAndMaxComponent {
 }
 
 @Component({
-  template: ` <nz-slider [ngModel]="26"></nz-slider> `,
+  template: `
+    <nz-slider [ngModel]="26"></nz-slider>
+  `,
   styles: [styles]
 })
 class SliderWithValueComponent {}
 
 @Component({
-  template: ` <nz-slider [nzStep]="step"></nz-slider> `,
+  template: `
+    <nz-slider [nzStep]="step"></nz-slider>
+  `,
   styles: [styles]
 })
 class SliderWithStepComponent {
   step = 25;
 }
 
 @Component({
-  template: ` <nz-slider [ngModel]="3" [nzMin]="4" [nzMax]="6"></nz-slider> `,
+  template: `
+    <nz-slider [ngModel]="3" [nzMin]="4" [nzMax]="6"></nz-slider>
+  `,
   styles: [styles]
 })
 class SliderWithValueSmallerThanMinComponent {}
 
 @Component({
-  template: ` <nz-slider [ngModel]="7" [nzMin]="4" [nzMax]="6"></nz-slider> `,
+  template: `
+    <nz-slider [ngModel]="7" [nzMin]="4" [nzMax]="6"></nz-slider>
+  `,
   styles: [styles]
 })
 class SliderWithValueGreaterThanMaxComponent {}
 
 @Component({
-  template: ` <nz-slider nzVertical></nz-slider> `,
+  template: `
+    <nz-slider nzVertical></nz-slider>
+  `,
   styles: [styles]
 })
 class VerticalSliderComponent {}
@@ -842,6 +885,14 @@ class VerticalSliderComponent {}
 })
 class ReverseSliderComponent {}
 
+@Component({
+  template: `
+    <nz-slider [nzMin]="4" [nzMax]="6" nzReverse></nz-slider>
+  `,
+  styles: [styles]
+})
+class ReverseSliderWithMinAndMaxComponent {}
+
 @Component({
   template: `
     <nz-slider
@@ -888,15 +939,19 @@ class SliderWithFormControlComponent implements OnInit {
 }
 
 @Component({
-  template: ` <nz-slider [nzTooltipVisible]="show" [ngModel]="value"></nz-slider> `
+  template: `
+    <nz-slider [nzTooltipVisible]="show" [ngModel]="value"></nz-slider>
+  `
 })
 class SliderShowTooltipComponent {
   show: NzSliderShowTooltip = 'default';
   value = 0;
 }
 
 @Component({
-  template: ` <nz-slider [nzRange]="range"></nz-slider> `
+  template: `
+    <nz-slider [nzRange]="range"></nz-slider>
+  `
 })
 class NzTestSliderKeyboardComponent {
   range = false;