Slider滑动输入条

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

    基本

    基本滑动条。当 为 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滑动输入条 - 图4

    带 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 nzType="frown" [class.icon-highlight]="preHighLight"></i>
    8.       <nz-slider [nzMin]="0" [nzMax]="20" [(ngModel)]="sliderValue"></nz-slider>
    9.       <i nz-icon nzType="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.   }
    55.   get sliderValue(): number {
    56.     return this._sliderValue;
    57.   }
    59.   ngOnInit(): void {
    60.     this.sliderValue = 0;
    61.   }
    63.   highlightIcon(): void {
    64.     const lower = this._sliderValue >= this.mid;
    65.     this.preHighLight = !lower;
    66.     this.nextHighLight = lower;
    67.   }
    68. }

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

    Slider滑动输入条 - 图6

    垂直

    垂直方向的 Slider。

    1. import { Component } from '@angular/core';
    3. @Component({
    4.   selector: 'nz-demo-slider-vertical',
    5.   template: `
    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. }

    反向

    设置 nzReverse 可以将滑动条置反。

    1. import { Component } from '@angular/core';
    3. @Component({
    4.   selector: 'nz-demo-slider-reverse',
    5.   template: `
    6.     <div>
    7.       <nz-slider [ngModel]="30" [nzReverse]="reverse"></nz-slider>
    8.       <nz-slider nzRange [ngModel]="[20, 50]" [nzReverse]="reverse"></nz-slider>
    9.       Reversed: <nz-switch nzSize="small" [(ngModel)]="reverse"></nz-switch>
    10.     </div>
    11.   `,
    12.   styles: [
    13.     `
    14.       h4 {
    15.         margin: 0 0 16px;
    16.       }
    18.       .ant-slider-with-marks {
    19.         margin-bottom: 44px;
    20.     `
    21.   ]
    22. })
    23. export class NzDemoSliderReverseComponent {
    24.   reverse = true;
    25. }

    Slider滑动输入条 - 图8

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

    自定义提示

    使用 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滑动输入条 - 图10

    带标签的滑块

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

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

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