• Slider滑动输入条
    • 何时使用
    • 代码演示
    • API
      • 单独引入此组件
      • nz-slidercomponent

    Slider滑动输入条

    滑动型输入器，展示当前值和可选范围。

    何时使用

    当用户需要在数值区间/自定义区间内进行选择时，可为连续或离散值。

    代码演示

    Slider滑动输入条 - 图1

    基本

    基本滑动条。当 nzRange 为 true 时，渲染为双滑块。当 nzDisabled 为 true 时，滑块处于不可用状态。

    1. import { Component } from '@angular/core';
    3. @Component({
    4.   selector: 'nz-demo-slider-basic',
    5.   template: `
    6.     <nz-slider [(ngModel)]="value1" [nzDisabled]="disabled"></nz-slider>
    7.     <nz-slider nzRange [(ngModel)]="value2" [nzDisabled]="disabled"></nz-slider>
    8.     Disabled:
    9.     <nz-switch nzSize="small" [(ngModel)]="disabled"></nz-switch>
    10.   `
    11. })
    12. export class NzDemoSliderBasicComponent {
    13.   disabled = false;
    14.   value1 = 30;
    15.   value2 = [20, 50];
    16. }

    Slider滑动输入条 - 图2

    带 icon 的滑块

    滑块左右可以设置图标来表达业务含义。

    1. import { Component, OnInit } from '@angular/core';
    3. @Component({
    4.   selector: 'nz-demo-slider-icon-slider',
    5.   template: `
    6.     <div class="icon-wrapper test-class">
    7.       <i nz-icon type="frown" [class.icon-highlight]="preHighLight"></i>
    8.       <nz-slider [nzMin]="0" [nzMax]="20" [(ngModel)]="sliderValue"></nz-slider>
    9.       <i nz-icon type="smile" [class.icon-highlight]="nextHighLight"></i>
    10.     </div>
    11.   `,
    12.   styles: [
    13.     `
    14.       .icon-wrapper {
    15.         position: relative;
    16.         padding: 0px 30px;
    17.       }
    19.       [nz-icon] {
    20.         position: absolute;
    21.         top: -2px;
    22.         width: 16px;
    23.         height: 16px;
    24.         line-height: 1;
    25.         font-size: 16px;
    26.         color: rgba(0, 0, 0, 0.25);
    27.       }
    29.       [nz-icon]:first-child {
    30.         left: 0;
    31.       }
    33.       [nz-icon]:last-child {
    34.         right: 0;
    35.       }
    37.       .icon-highlight {
    38.         color: rgba(0, 0, 0, 0.45);
    39.       }
    40.     `
    41.   ]
    42. })
    43. export class NzDemoSliderIconSliderComponent implements OnInit {
    44.   min = 0;
    45.   max = 20;
    46.   mid = parseFloat(((this.max - this.min) / 2).toFixed(5));
    47.   preHighLight = false;
    48.   nextHighLight = false;
    49.   _sliderValue = 0;
    51.   set sliderValue(value: number) {
    52.     this._sliderValue = value;
    53.     this.highlightIcon();
    54.   }
    56.   get sliderValue(): number {
    57.     return this._sliderValue;
    58.   }
    60.   ngOnInit(): void {
    61.     this.sliderValue = 0;
    62.   }
    64.   highlightIcon() {
    65.     const lower = this._sliderValue >= this.mid;
    66.     this.preHighLight = !lower;
    67.     this.nextHighLight = lower;
    68.   }
    69. }

    Slider滑动输入条 - 图3

    事件

    当 Slider 的值发生改变时，会触发 nzOnChange 事件，并把改变后的值作为参数传入。在 onmouseup 时，会触发 nzOnAfterChange 事件，并把当前值作为参数传入。

    1. import { Component } from '@angular/core';
    3. @Component({
    4.   selector: 'nz-demo-slider-event',
    5.   template: `
    6.     <nz-slider
    7.       [(ngModel)]="singleValue"
    8.       (ngModelChange)="onChange($event)"
    9.       (nzOnAfterChange)="onAfterChange($event)"
    10.     ></nz-slider>
    11.     <nz-slider
    12.       nzRange
    13.       [nzStep]="10"
    14.       [(ngModel)]="rangeValue"
    15.       (ngModelChange)="onChange($event)"
    16.       (nzOnAfterChange)="onAfterChange($event)"
    17.     ></nz-slider>
    18.   `
    19. })
    20. export class NzDemoSliderEventComponent {
    21.   singleValue = 30;
    22.   rangeValue = [20, 50];
    24.   onChange(value: number): void {
    25.     console.log(`onChange: ${value}`);
    26.   }
    28.   onAfterChange(value: number): void {
    29.     console.log(`onAfterChange: ${value}`);
    30.   }
    31. }

    Slider滑动输入条 - 图4

    垂直

    垂直方向的 Slider。

    1. import { Component } from '@angular/core';
    3. @Component({
    4.   selector: 'nz-demo-slider-vertical',
    5.   template: `
    6.     <div [ngStyle]="{ height: '300px' }">
    7.       <div [ngStyle]="style">
    8.         <nz-slider nzVertical [ngModel]="30"></nz-slider>
    9.       </div>
    10.       <div [ngStyle]="style">
    11.         <nz-slider nzVertical nzRange [nzStep]="10" [ngModel]="[20, 50]"></nz-slider>
    12.       </div>
    13.       <div [ngStyle]="style">
    14.         <nz-slider nzVertical nzRange [nzMarks]="marks" [ngModel]="[26, 37]"></nz-slider>
    15.       </div>
    16.     </div>
    17.   `
    18. })
    19. export class NzDemoSliderVerticalComponent {
    20.   style = {
    21.     float: 'left',
    22.     height: '300px',
    23.     marginLeft: '70px'
    24.   };
    26.   marks = {
    27.     0: '0°C',
    28.     26: '26°C',
    29.     37: '37°C',
    30.     100: {
    31.       style: {
    32.         color: '#f50'
    33.       },
    34.       label: '<strong>100°C</strong>'
    35.     }
    36.   };
    37. }

    Slider滑动输入条 - 图5

    带输入框的滑块

    和 数字输入框 组件保持同步。

    1. import { Component } from '@angular/core';
    3. @Component({
    4.   selector: 'nz-demo-slider-input-number',
    5.   template: `
    6.     <nz-row>
    7.       <nz-col nzSpan="12">
    8.         <nz-slider [nzMin]="1" [nzMax]="20" [(ngModel)]="value1"></nz-slider>
    9.       </nz-col>
    10.       <div nz-col nzSpan="4">
    11.         <nz-input-number
    12.           [nzMin]="1"
    13.           [nzMax]="20"
    14.           [ngStyle]="{ marginLeft: '16px' }"
    15.           [(ngModel)]="value1"
    16.         ></nz-input-number>
    17.       </div>
    18.     </nz-row>
    20.     <nz-row>
    21.       <nz-col nzSpan="12">
    22.         <nz-slider [nzMin]="0" [nzMax]="1" [nzStep]="0.01" [(ngModel)]="value2"></nz-slider>
    23.       </nz-col>
    24.       <nz-col nzSpan="4">
    25.         <nz-input-number
    26.           [nzMin]="0"
    27.           [nzMax]="1"
    28.           [ngStyle]="{ marginLeft: '16px' }"
    29.           [nzStep]="0.01"
    30.           [(ngModel)]="value2"
    31.         ></nz-input-number>
    32.       </nz-col>
    33.     </nz-row>
    34.   `
    35. })
    36. export class NzDemoSliderInputNumberComponent {
    37.   value1 = 1;
    38.   value2 = 0;
    39. }

    Slider滑动输入条 - 图6

    自定义提示

    使用 nzTipFormatter 可以格式化 Tooltip 的内容，设置 nzTipFormatter = null，则隐藏 Tooltip。

    1. import { Component } from '@angular/core';
    3. @Component({
    4.   selector: 'nz-demo-slider-tip-formatter',
    5.   template: `
    6.     <nz-slider [nzTipFormatter]="formatter"></nz-slider>
    7.     <nz-slider [nzTipFormatter]="null"></nz-slider>
    8.   `
    9. })
    10. export class NzDemoSliderTipFormatterComponent {
    11.   formatter(value: number): string {
    12.     return `${value}%`;
    13.   }
    14. }

    Slider滑动输入条 - 图7

    带标签的滑块

    使用 nzMarks 属性标注分段式滑块，使用 ngModel 指定滑块位置。当 nzIncluded = false 时，表明不同标记间为并列关系。当 nzStep = null 时，Slider 的可选值仅有 nzMarks 标出来的部分。

    1. import { Component } from '@angular/core';
    3. @Component({
    4.   selector: 'nz-demo-slider-mark',
    5.   template: `
    6.     <div>
    7.       <h4>included=true</h4>
    8.       <nz-slider [nzMarks]="marks" [ngModel]="37"></nz-slider>
    9.       <nz-slider [nzMarks]="marks" nzIncluded nzRange [ngModel]="[26, 37]"></nz-slider>
    10.       <h4>included=false</h4>
    11.       <nz-slider [nzMarks]="marks" [nzIncluded]="false" [ngModel]="37"></nz-slider>
    12.       <h4>marks & step</h4>
    13.       <nz-slider [nzMarks]="marks" [nzStep]="10" [ngModel]="37"></nz-slider>
    14.       <h4>step=null || dots=true</h4>
    15.       <nz-slider [nzMarks]="marks" [nzStep]="null" [ngModel]="37"></nz-slider>
    16.       <nz-slider [nzMarks]="marks" nzDots [ngModel]="37"></nz-slider>
    17.       Change nzMarks dynamically: <button nz-button (click)="changeMarks()">Change nzMarks</button>
    18.     </div>
    19.   `,
    20.   styles: [
    21.     `
    22.       h4 {
    23.         margin: 0 0 16px;
    24.       }
    26.       .ant-slider-with-marks {
    27.         margin-bottom: 44px;
    28.       }
    29.     `
    30.   ]
    31. })
    32. export class NzDemoSliderMarkComponent {
    33.   marks: any = {
    34.     0: '0°C',
    35.     26: '26°C',
    36.     37: '37°C',
    37.     100: {
    38.       style: {
    39.         color: '#f50'
    40.       },
    41.       label: '<strong>100°C</strong>'
    42.     }
    43.   };
    45.   changeMarks() {
    46.     this.marks = {
    47.       20: '20%',
    48.       99: '99%'
    49.     };
    50.   }
    51. }

    Slider滑动输入条 - 图8

    控制 Tooltip 的显示

    当 nzTooltipVisible 为 always 时，将始终显示 ToolTip，为 never 时反之则始终不显示，即使在拖动、移入时也是如此。

    1. import { Component } from '@angular/core';
    3. @Component({
    4.   selector: 'nz-demo-slider-tooltip',
    5.   template: `
    6.     <nz-slider [nzTooltipVisible]="'always'"></nz-slider>
    7.     <nz-slider [nzTooltipVisible]="'never'"></nz-slider>
    8.   `
    9. })
    10. export class NzDemoSliderTooltipComponent {}

    API

    单独引入此组件

    想要了解更多关于单独引入组件的内容，可以在快速上手页面进行查看。

    1. import { NzSliderModule } from 'ng-zorro-antd';

    nz-slidercomponent

    参数说明类型默认值
    [nzDisabled]值为 true 时，滑块为禁用状态booleanfalse
    [nzDots]是否只能拖拽到刻度上booleanfalse
    [nzIncluded]marks 不为空对象时有效，值为 true 时表示值为包含关系，false 表示并列booleantrue
    [nzMarks]刻度标记，key 的类型必须为 number 且取值在闭区间 [min, max] 内，每个标签可以单独设置样式object{ number: string/HTML } or { number: { style: object, label: string/HTML } }
    [nzMax]最大值number100
    [nzMin]最小值number0
    [nzRange]双滑块模式booleanfalse
    [nzStep]步长，取值必须大于 0，并且可被 (max - min) 整除。当 marks 不为空对象时，可以设置 step 为 null，此时 Slider 的可选值仅有 marks 标出来的部分。number｜null1
    [nzTipFormatter]Slider 会把当前值传给 nzTipFormatter，并在 Tooltip 中显示 nzTipFormatter 的返回值，若为 null，则隐藏 Tooltip。(value: number) => string-
    [ngModel]设置当前取值。当 range 为 false 时，使用 number，否则用 [number, number]number｜number[]-
    [nzVertical]值为 true 时，Slider 为垂直方向booleanfalse
    [nzTooltipVisible]值为 always 时总是显示，值为 never 时在任何情况下都不显示'default'｜'always'｜'never'default
    (nzOnAfterChange)与 onmouseup 触发时机一致，把当前值作为参数传入。EventEmitter<number[] ｜ number>-
    (ngModelChange)当 Slider 的值发生改变时，会触发 ngModelChange 事件，并把改变后的值作为参数传入。EventEmitter<number[] ｜ number>>-