fix(module:slider): change mark style in horizontal mode

close NG-ZORRO#3876
wzhudev · Jul 29, 2019 · a4af349 · a4af349
1 parent e9663a2
commit a4af349
Showing 1 changed file with 5 additions and 8 deletions.
diff --git 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';
 
@@ -29,6 +29,7 @@ export class NzSliderMarksComponent implements OnChanges {
   @Input() @InputBoolean() nzVertical = false;
   @Input() @InputBoolean() nzIncluded = false;
 
+  /** @internal */
   marks: DisplayedMark[];
 
   ngOnChanges(changes: SimpleChanges): void {
@@ -49,7 +50,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 +64,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 +73,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}%`
       };
     }