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滑动输入条 - 图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 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.     this.highlightIcon();
    54.   }
    55.   get sliderValue(): number {
    56.     return this._sliderValue;
    57.   }
    59.   ngOnInit(): void {
    60.     this.sliderValue = 0;
    61.   }
    63.   highlightIcon() {
    64.     const lower = this._sliderValue >= this.mid;
    65.     this.preHighLight = !lower;
    66.     this.nextHighLight = lower;
    67.   }
    68. }

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

    Slider滑动输入条 - 图4

    垂直方向的 Slider。

    1. import { Component } from '@angular/core';
    3. @Component({
    4.   selector: 'nz-demo-slider-vertical',
    5.   template: `
    6.     <div [ngStyle]="{ height: '300px' }">
    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. }

    带输入框的滑块

    和 组件保持同步。

    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.           [nzMin]="0"
    26.           [nzMax]="1"
    27.           [ngStyle]="{ marginLeft: '16px' }"
    28.           [nzStep]="0.01"
    29.           [(ngModel)]="value2"
    30.         ></nz-input-number>
    31.       </nz-col>
    32.     </nz-row>
    33.   `
    34. })
    35. export class NzDemoSliderInputNumberComponent {
    36.   value1 = 1;
    37.   value2 = 0;
    38. }

    自定义提示

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

    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.   `,
    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. }

    控制 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 {}