diff --git a/components/slider/demo/basic.ts b/components/slider/demo/basic.ts index 0d2e050b726..edd1e693e57 100644 --- a/components/slider/demo/basic.ts +++ b/components/slider/demo/basic.ts @@ -3,13 +3,14 @@ import { Component } from '@angular/core'; @Component({ selector: 'nz-demo-slider-basic', template: ` - - - Disabled: + + + Disabled: + ` }) export class NzDemoSliderBasicComponent { - disabled = false; - + value1 = 30; + value2 = [ 20, 50 ]; } diff --git a/components/slider/demo/event.ts b/components/slider/demo/event.ts index 5beee080a52..188ae2b9b4a 100644 --- a/components/slider/demo/event.ts +++ b/components/slider/demo/event.ts @@ -3,24 +3,13 @@ import { Component } from '@angular/core'; @Component({ selector: 'nz-demo-slider-event', template: ` - - + + ` }) export class NzDemoSliderEventComponent { - - singleValue; - rangeValue; + singleValue = 30; + rangeValue = [ 20, 50 ]; onChange(value) { console.log(`onChange: ${value}`); diff --git a/components/slider/demo/mark.md b/components/slider/demo/mark.md index 19f65c62992..824f540a33e 100644 --- a/components/slider/demo/mark.md +++ b/components/slider/demo/mark.md @@ -7,10 +7,10 @@ title: ## zh-CN -使用 `nzMarks` 属性标注分段式滑块，使用 `nzValue` / `nzDefaultValue` 指定滑块位置。当 `nzIncluded = false` 时，表明不同标记间为并列关系。当 `nzStep = null` 时，Slider 的可选值仅有 `nzMarks` 标出来的部分。 +使用 `nzMarks` 属性标注分段式滑块，使用 `ngModel` 指定滑块位置。当 `nzIncluded = false` 时，表明不同标记间为并列关系。当 `nzStep = null` 时，Slider 的可选值仅有 `nzMarks` 标出来的部分。 ## en-US -Using `nzMarks` property to mark a graduated slider, use `nzValue` or `nzDefaultValue` to specify the position of thumb. When `nzIncluded` is false, means that different thumbs are coordinated. When `nzStep` is null, users can only slide the thumbs onto marks. +Using `nzMarks` property to mark a graduated slider, use `ngModel` to specify the position of thumb. When `nzIncluded` is false, means that different thumbs are coordinated. When `nzStep` is null, users can only slide the thumbs onto marks. diff --git a/components/slider/demo/mark.ts b/components/slider/demo/mark.ts index 43414e0c6cd..5ed9e3d9ca3 100644 --- a/components/slider/demo/mark.ts +++ b/components/slider/demo/mark.ts @@ -5,15 +5,15 @@ import { Component } from '@angular/core'; template: `

included=true

- - + +

included=false

- +

marks & step

- +

step=null || dots=true

- - + + Change nzMarks dynamically:
`, diff --git a/components/slider/demo/vertical.ts b/components/slider/demo/vertical.ts index c76e6886de5..790b2853b64 100644 --- a/components/slider/demo/vertical.ts +++ b/components/slider/demo/vertical.ts @@ -5,13 +5,13 @@ import { Component } from '@angular/core'; template: `
- +
- +
- +
` diff --git a/components/slider/doc/index.en-US.md b/components/slider/doc/index.en-US.md index 5d54ccc9eb9..e24f2c21641 100644 --- a/components/slider/doc/index.en-US.md +++ b/components/slider/doc/index.en-US.md @@ -16,7 +16,6 @@ To input a value in a range. | Property | Description | Type | Default | | -------- | ----------- | ---- | ------- | -| `[nzDefaultValue]` | The default value of slider. When `range` is `false`, use `number`, otherwise, use `[number, number]` | `number｜number[]` | `0｜[0, 0]` | | `[nzDisabled]` | If true, the slider will not be interactable. | `boolean` | `false` | | `[nzDots]` | Whether the thumb can drag over tick only. | `boolean` | `false` | | `[nzIncluded]` | Make effect when `marks` not null，`true` means containment and `false` means coordinative | `boolean` | `true` | diff --git a/components/slider/doc/index.zh-CN.md b/components/slider/doc/index.zh-CN.md index d271c7f6fb4..770082cc834 100644 --- a/components/slider/doc/index.zh-CN.md +++ b/components/slider/doc/index.zh-CN.md @@ -17,7 +17,6 @@ title: Slider | 参数 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | -| `[nzDefaultValue]` | 设置初始取值。当 `range` 为 `false` 时，使用 `number`，否则用 `[number, number]` | `number｜number[]` | `0｜[0, 0]` | | `[nzDisabled]` | 值为 `true` 时，滑块为禁用状态 | `boolean` | `false` | | `[nzDots]` | 是否只能拖拽到刻度上 | `boolean` | `false` | | `[nzIncluded]` | `marks` 不为空对象时有效，值为 true 时表示值为包含关系，false 表示并列 | `boolean` | `true` | diff --git a/components/slider/nz-slider-error.ts b/components/slider/nz-slider-error.ts index e8e7f558dc7..210642e0bf9 100644 --- a/components/slider/nz-slider-error.ts +++ b/components/slider/nz-slider-error.ts @@ -1,3 +1,3 @@ export function getValueTypeNotMatchError(): Error { - return new Error(`The "nzRange" can't match the "nzValue"'s type, please check these properties: "nzRange", "nzValue", "nzDefaultValue".`); + return new Error(`The "nzRange" can't match the "ngModel"'s type, please check these properties: "nzRange", "ngModel", "nzDefaultValue".`); } diff --git a/components/slider/nz-slider.component.ts b/components/slider/nz-slider.component.ts index 918189e9c6a..88b7248cb92 100644 --- a/components/slider/nz-slider.component.ts +++ b/components/slider/nz-slider.component.ts @@ -47,7 +47,6 @@ export class NzSliderComponent implements ControlValueAccessor, OnInit, OnChange @Input() @InputBoolean() nzIncluded: boolean = true; @Input() @InputBoolean() nzRange: boolean = false; @Input() @InputBoolean() nzVertical: boolean = false; - @Input() nzDefaultValue: SliderValue = null; @Input() nzMarks: Marks = null; @Input() nzMax = 100; @Input() nzMin = 0; @@ -55,6 +54,9 @@ export class NzSliderComponent implements ControlValueAccessor, OnInit, OnChange @Input() nzTooltipVisible: SliderShowTooltip = 'default'; @Input() nzTipFormatter: (value: number) => string; + /** @deprecated 8.0.0, This API is redundant for Angular. */ + @Input() nzDefaultValue: SliderValue = null; + @Output() readonly nzOnAfterChange = new EventEmitter(); value: SliderValue = null; // CORE value state @@ -78,7 +80,6 @@ export class NzSliderComponent implements ControlValueAccessor, OnInit, OnChange constructor(private cdr: ChangeDetectorRef) {} ngOnInit(): void { - this.assertValueTypeMatch(this.nzDefaultValue); this.handles = this.generateHandles(this.nzRange ? 2 : 1); this.sliderDOM = this.slider.nativeElement; this.marksArray = this.nzMarks ? this.generateMarkItems(this.nzMarks) : null;