Slider

A Slider component for displaying current value and intervals in range.

When To Use#

To input a value in a range.

Import this Component Individually#

You can get more detail here.

import { NzSliderModule } from 'ng-zorro-antd/slider';

Examples

Disabled:

Basic slider. When nzRange is true, display as dual thumb mode. When nzDisabled is true, the slider will not be interactive.

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-slider-basic',
  template: `
    <nz-slider [(ngModel)]="value1" [nzDisabled]="disabled"></nz-slider>
    <nz-slider nzRange [(ngModel)]="value2" [nzDisabled]="disabled"></nz-slider>
    Disabled:
    <nz-switch nzSize="small" [(ngModel)]="disabled"></nz-switch>
  `
})
export class NzDemoSliderBasicComponent {
  disabled = false;
  value1 = 30;
  value2 = [20, 50];
}

You can add an icon beside the slider to make it meaningful.

expand codeexpand code
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'nz-demo-slider-icon-slider',
  template: `
    <div class="icon-wrapper test-class">
      <i nz-icon nzType="frown" [class.icon-highlight]="preHighLight"></i>
      <nz-slider [nzMin]="0" [nzMax]="20" [(ngModel)]="sliderValue"></nz-slider>
      <i nz-icon nzType="smile" [class.icon-highlight]="nextHighLight"></i>
    </div>
  `,
  styles: [
    `
      .icon-wrapper {
        position: relative;
        padding: 0px 30px;
      }

      [nz-icon] {
        position: absolute;
        top: -2px;
        width: 16px;
        height: 16px;
        line-height: 1;
        font-size: 16px;
        color: rgba(0, 0, 0, 0.25);
      }

      [nz-icon]:first-child {
        left: 0;
      }

      [nz-icon]:last-child {
        right: 0;
      }

      .icon-highlight {
        color: rgba(0, 0, 0, 0.45);
      }
    `
  ]
})
export class NzDemoSliderIconSliderComponent implements OnInit {
  min = 0;
  max = 20;
  mid = parseFloat(((this.max - this.min) / 2).toFixed(5));
  preHighLight = false;
  nextHighLight = false;
  _sliderValue = 0;

  set sliderValue(value: number) {
    this._sliderValue = value;
    this.highlightIcon();
  }

  get sliderValue(): number {
    return this._sliderValue;
  }

  ngOnInit(): void {
    this.sliderValue = 0;
  }

  highlightIcon() {
    const lower = this._sliderValue >= this.mid;
    this.preHighLight = !lower;
    this.nextHighLight = lower;
  }
}

The nzOnChange callback function will fire when the user changes the slider's value. The nzOnAfterChange callback function will fire when onmouseup fired.

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-slider-event',
  template: `
    <nz-slider
      [(ngModel)]="singleValue"
      (ngModelChange)="onChange($event)"
      (nzOnAfterChange)="onAfterChange($event)"
    ></nz-slider>
    <nz-slider
      nzRange
      [nzStep]="10"
      [(ngModel)]="rangeValue"
      (ngModelChange)="onChange($event)"
      (nzOnAfterChange)="onAfterChange($event)"
    ></nz-slider>
  `
})
export class NzDemoSliderEventComponent {
  singleValue = 30;
  rangeValue = [20, 50];

  onChange(value: number): void {
    console.log(`onChange: ${value}`);
  }

  onAfterChange(value: number): void {
    console.log(`onAfterChange: ${value}`);
  }
}
0°C26°C37°C100°C

The vertical Slider.

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-slider-vertical',
  template: `
    <div [ngStyle]="{ height: '300px' }">
      <div [ngStyle]="style">
        <nz-slider nzVertical [ngModel]="30"></nz-slider>
      </div>
      <div [ngStyle]="style">
        <nz-slider nzVertical nzRange [nzStep]="10" [ngModel]="[20, 50]"></nz-slider>
      </div>
      <div [ngStyle]="style">
        <nz-slider nzVertical nzRange [nzMarks]="marks" [ngModel]="[26, 37]"></nz-slider>
      </div>
    </div>
  `
})
export class NzDemoSliderVerticalComponent {
  style = {
    float: 'left',
    height: '300px',
    marginLeft: '70px'
  };

  marks = {
    0: '0°C',
    26: '26°C',
    37: '37°C',
    100: {
      style: {
        color: '#f50'
      },
      label: '<strong>100°C</strong>'
    }
  };
}

Synchronize with InptNumber component.

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-slider-input-number',
  template: `
    <nz-row>
      <nz-col nzSpan="12">
        <nz-slider [nzMin]="1" [nzMax]="20" [(ngModel)]="value1"></nz-slider>
      </nz-col>
      <div nz-col nzSpan="4">
        <nz-input-number
          [nzMin]="1"
          [nzMax]="20"
          [ngStyle]="{ marginLeft: '16px' }"
          [(ngModel)]="value1"
        ></nz-input-number>
      </div>
    </nz-row>

    <nz-row>
      <nz-col nzSpan="12">
        <nz-slider [nzMin]="0" [nzMax]="1" [nzStep]="0.01" [(ngModel)]="value2"></nz-slider>
      </nz-col>
      <nz-col nzSpan="4">
        <nz-input-number
          [nzMin]="0"
          [nzMax]="1"
          [ngStyle]="{ marginLeft: '16px' }"
          [nzStep]="0.01"
          [(ngModel)]="value2"
        ></nz-input-number>
      </nz-col>
    </nz-row>
  `
})
export class NzDemoSliderInputNumberComponent {
  value1 = 1;
  value2 = 0;
}

Use nzTipFormatter to format content of Toolip. If nzTipFormatter is null, hide it.

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-slider-tip-formatter',
  template: `
    <nz-slider [nzTipFormatter]="formatter"></nz-slider>
    <nz-slider [nzTipFormatter]="null"></nz-slider>
  `
})
export class NzDemoSliderTipFormatterComponent {
  formatter(value: number): string {
    return `${value}%`;
  }
}

included=true

0°C26°C37°C100°C
0°C26°C37°C100°C

included=false

0°C26°C37°C100°C

marks & step

0°C26°C37°C100°C

step=null || dots=true

0°C26°C37°C100°C
0°C26°C37°C100°C
Change nzMarks dynamically:

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.

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-slider-mark',
  template: `
    <div>
      <h4>included=true</h4>
      <nz-slider [nzMarks]="marks" [ngModel]="37"></nz-slider>
      <nz-slider [nzMarks]="marks" nzIncluded nzRange [ngModel]="[26, 37]"></nz-slider>
      <h4>included=false</h4>
      <nz-slider [nzMarks]="marks" [nzIncluded]="false" [ngModel]="37"></nz-slider>
      <h4>marks & step</h4>
      <nz-slider [nzMarks]="marks" [nzStep]="10" [ngModel]="37"></nz-slider>
      <h4>step=null || dots=true</h4>
      <nz-slider [nzMarks]="marks" [nzStep]="null" [ngModel]="37"></nz-slider>
      <nz-slider [nzMarks]="marks" nzDots [ngModel]="37"></nz-slider>
      Change nzMarks dynamically: <button nz-button (click)="changeMarks()">Change nzMarks</button>
    </div>
  `,
  styles: [
    `
      h4 {
        margin: 0 0 16px;
      }

      .ant-slider-with-marks {
        margin-bottom: 44px;
      }
    `
  ]
})
export class NzDemoSliderMarkComponent {
  marks: any = {
    0: '0°C',
    26: '26°C',
    37: '37°C',
    100: {
      style: {
        color: '#f50'
      },
      label: '<strong>100°C</strong>'
    }
  };

  changeMarks() {
    this.marks = {
      20: '20%',
      99: '99%'
    };
  }
}

When nzTooltipVisible is always, Tooltip will show always. And set to never, tooltip would never show, even when user is dragging or hovering.

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-slider-tooltip',
  template: `
    <nz-slider [nzTooltipVisible]="'always'"></nz-slider>
    <nz-slider [nzTooltipVisible]="'never'"></nz-slider>
  `
})
export class NzDemoSliderTooltipComponent {}

API#

nz-slider#

PropertyDescriptionTypeDefault
[nzDisabled]If true, the slider will not be interactable.booleanfalse
[nzDots]Whether the thumb can drag over tick only.booleanfalse
[nzIncluded]Make effect when marks not null,true means containment and false means coordinativebooleantrue
[nzMarks]Tick mark of Slider, type of key must be number, and must in closed interval [min, max] ,each mark can declare its own style.object{ number: string/HTML } or { number: { style: object, label: string/HTML } }
[nzMax]The maximum value the slider can slide tonumber100
[nzMin]The minimum value the slider can slide to.number0
[nzRange]dual thumb modebooleanfalse
[nzStep]The granularity the slider can step through values. Must greater than 0, and be divided by (max - min) . When marks no null, step can be null.number | null1
[nzTipFormatter]Slider will pass its value to tipFormatter, and display its value in Tooltip, and hide Tooltip when return value is null.(value: number) => string-
[ngModel]The value of slider. When range is false, use number, otherwise, use [number, number]number | number[]-
[nzVertical]If true, the slider will be vertical.booleanfalse
[nzTooltipVisible]When set to always tooltips are always displayed. When set to never they are never displayed'default' | 'always' | 'never'default
(nzOnAfterChange)Fire when onmouseup is fired.EventEmitter<number[] | number>-
(ngModelChange)Callback function that is fired when the user changes the slider's value.EventEmitter<number[] | number>-
0