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

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

      Loading...

Slider with icon

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

      Loading...

Event

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

      Loading...

0°C26°C37°C100°C

Vertical

The vertical Slider.

      Loading...

0°C26°C37°C100°C

Reversed:

Reverse

Using nzReverse to render slider reversely.

      Loading...

Slider with InputNumber

Synchronize with InptNumber component.

      Loading...

Customerize tooltip

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

      Loading...

included=true

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

Change nzMarks dynamically:

Graduated slider

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.

      Loading...

API#

nz-slidercomponent#

Property	Description	Type	Default
`[nzDisabled]`	If true, the slider will not be interactable.	`boolean`	`false`
`[nzDots]`	Whether the thumb can drag over tick only.	`boolean`	`false`
`[nzIncluded]`	Make effect when `marks` not null，`true` means containment and `false` means coordinative	`boolean`	`true`
`[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 to	`number`	`100`
`[nzMin]`	The minimum value the slider can slide to.	`number`	`0`
`[nzRange]`	dual thumb mode	`boolean`	`false`
`[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 \| null`	`1`
`[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.	`boolean`	`false`
`[nzReverse]`	Reverse the component	`boolean`	`false`
`[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 Tooltip	`string`
`(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>`	-