Slider

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

When To Use#

To input a value in a range.

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
Loading...

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

expand codeexpand code
Loading...

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
Loading...
0°C26°C37°C100°C

The vertical Slider.

expand codeexpand code
Loading...
0°C26°C37°C100°C
Reversed:

Using nzReverse to render slider reversely.

expand codeexpand code
Loading...

Synchronize with InptNumber component.

expand codeexpand code
Loading...

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

expand codeexpand code
Loading...

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
Loading...

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
Loading...

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 | TemplateRef<void>-
[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
[nzReverse]Reverse the componentbooleanfalse
[nzTooltipVisible]When set to always tooltips are always displayed. When set to never they are never displayed'default' | 'always' | 'never'default
[nzTooltipPlacement]Set the default placement of Tooltipstring
(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