Skip to content

Commit

Permalink
fix(module:slider): change mark style in horizontal mode
Browse files Browse the repository at this point in the history
  • Loading branch information
Wendell committed Jul 29, 2019
1 parent e9663a2 commit a4af349
Showing 1 changed file with 5 additions and 8 deletions.
13 changes: 5 additions & 8 deletions components/slider/nz-slider-marks.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand All @@ -29,6 +29,7 @@ export class NzSliderMarksComponent implements OnChanges {
@Input() @InputBoolean() nzVertical = false;
@Input() @InputBoolean() nzIncluded = false;

/** @internal */
marks: DisplayedMark[];

ngOnChanges(changes: SimpleChanges): void {
Expand All @@ -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 {
Expand All @@ -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) {
Expand All @@ -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}%`
};
}
Expand Down

0 comments on commit a4af349

Please sign in to comment.