diff --git a/components/slider/slider.component.ts b/components/slider/slider.component.ts index 43b9ce1ff5c..0dd8106f442 100644 --- a/components/slider/slider.component.ts +++ b/components/slider/slider.component.ts @@ -35,6 +35,7 @@ import { getPrecision, InputBoolean, InputNumber, + isNil, MouseTouchObserverConfig, silentEvent } from 'ng-zorro-antd/core/util'; @@ -536,7 +537,7 @@ export class NzSliderComponent implements ControlValueAccessor, OnInit, OnChange } private formatValue(value: NzSliderValue | null): NzSliderValue { - if (!value) { + if (isNil(value)) { return this.nzRange ? [this.nzMin, this.nzMax] : this.nzMin; } else if (assertValueValid(value, this.nzRange)) { return isValueRange(value) diff --git a/components/slider/slider.spec.ts b/components/slider/slider.spec.ts index 944eb171e61..6f9778ab1ab 100644 --- a/components/slider/slider.spec.ts +++ b/components/slider/slider.spec.ts @@ -481,6 +481,38 @@ describe('nz-slider', () => { }); }); + describe('min and max and value is zero', () => { + let testBed: ComponentBed; + let fixture: ComponentFixture; + let trackFillElement: HTMLElement; + + beforeEach(() => { + testBed = createComponentBed(SliderWithValueZeroComponent, { + imports: [NzSliderModule, FormsModule, ReactiveFormsModule, NoopAnimationsModule] + }); + fixture = testBed.fixture; + fixture.detectChanges(); + + getReferenceFromFixture(fixture); + trackFillElement = sliderNativeElement.querySelector('.ant-slider-track') as HTMLElement; + }); + + it('should set the value equal to the middle value', () => { + fixture.whenStable().then(() => { + expect(sliderInstance.value).toBe(0); + expect(sliderInstance.nzMin).toBe(-5); + expect(sliderInstance.nzMax).toBe(5); + }); + }); + + it('should set the fill to the middle value', () => { + fixture.whenStable().then(() => { + fixture.detectChanges(); + expect(trackFillElement.style.width).toBe('50%'); + }); + }); + }); + describe('vertical', () => { let testBed: ComponentBed; let fixture: ComponentFixture; @@ -1040,6 +1072,14 @@ class SliderWithStepComponent { }) class SliderWithValueSmallerThanMinComponent {} +@Component({ + template: ` + + `, + styles: [styles] +}) +class SliderWithValueZeroComponent {} + @Component({ template: `