From e6a622185f62f92f86da66b24d17649c6c5ebddf Mon Sep 17 00:00:00 2001
From: Wendell <wendzhue@gmail.com>
Date: Mon, 29 Jul 2019 20:05:02 +0800
Subject: [PATCH] fix(module:slider): change mark style in horizontal mode
 (#3879)

close #3876
---
 components/slider/nz-slider-marks.component.ts | 12 ++++--------
 1 file changed, 4 insertions(+), 8 deletions(-)

diff --git a/components/slider/nz-slider-marks.component.ts b/components/slider/nz-slider-marks.component.ts
index ffcc95dfc67..c462829343c 100644
--- a/components/slider/nz-slider-marks.component.ts
+++ b/components/slider/nz-slider-marks.component.ts
@@ -8,7 +8,7 @@
 
 import { ChangeDetectionStrategy, Component, Input, OnChanges, SimpleChanges, ViewEncapsulation } from '@angular/core';
 
-import { InputBoolean } from 'ng-zorro-antd/core';
+import { InputBoolean, NgStyleInterface } from 'ng-zorro-antd/core';
 
 import { isConfigAObject, DisplayedMark, ExtendedMark, Mark } from './nz-slider-definitions';
 
@@ -49,7 +49,7 @@ export class NzSliderMarksComponent implements OnChanges {
 
     this.marks = this.nzMarksArray.map(mark => {
       const { value, offset, config } = mark;
-      const style = this.buildStyles(value, range, config);
+      const style = this.getMarkStyles(value, range, config);
       const label = isConfigAObject(config) ? config.label : config;
 
       return {
@@ -63,7 +63,7 @@ export class NzSliderMarksComponent implements OnChanges {
     });
   }
 
-  private buildStyles(value: number, range: number, config: Mark): { [key: string]: string } {
+  private getMarkStyles(value: number, range: number, config: Mark): NgStyleInterface {
     let style;
 
     if (this.nzVertical) {
@@ -72,12 +72,8 @@ export class NzSliderMarksComponent implements OnChanges {
         bottom: `${((value - this.nzMin) / range) * 100}%`
       };
     } else {
-      const marksCount = this.nzMarksArray.length;
-      const unit = 100 / (marksCount - 1);
-      const markWidth = unit * 0.9;
       style = {
-        width: `${markWidth}%`,
-        marginLeft: `${-markWidth / 2}%`,
+        transform: `translate3d(-50%, 0, 0)`,
         left: `${((value - this.nzMin) / range) * 100}%`
       };
     }