# Slider滑动输入条

滑动型输入器，展示当前值和可选范围。

## 何时使用#

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

## 代码演示

基本滑动条。当 `range` 为 `true` 时，渲染为双滑块。当 `disabled` 为 `true` 时，滑块处于不可用状态。

滑块左右可以设置图标来表达业务含义。

当 Slider 的值发生改变时，会更新 `ngModel` 所绑定的变量(可通过setter方式或绑定ngModelChange来监测此事件)。在 `onmouseup` 时，会触发 `onAfterChange` 事件，并把当前值作为参数传入。

垂直方向的 Slider。

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

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

使用 `marks` 属性标注分段式滑块，使用 `value` / `defaultValue` 指定滑块位置。当 `included=false` 时，表明不同标记间为并列关系。当 `step=null` 时，Slider 的可选值仅有 `marks` 标出来的部分。

## API

### nz-slider

参数 | 说明 | 类型 | 默认值
--- | --- | --- | ---
nzRange | 当添加该属性时，启动双滑块模式 | attribute | -
nzMin | 最小值 | Number | 0
nzMax | 最大值 | Number | 100
nzStep | 步长。取值必须大于 0，并且可被 (max - min) 整除。当 `marks` 不为空对象时，可以设置 `step` 为 `null`，此时 Slider 的可选值仅有 marks 标出来的部分。 | Number | 1
nzMarks | 刻度标记。key 的类型必须为 `number` 且取值在闭区间 [min, max] 内，每个标签可以单独设置样式。 | object | {{ '{ number: string|HTML } or { number: { style: object, label: string|HTML } }' }}
nzDots | 是否只能拖拽到刻度上 | Boolean | false
ngModel | 设置/获取当前取值。当 `range` 为 `false` 时，使用 `number`，否则用 `[number, number]` | number|number[] |
nzDefaultValue | 设置初始取值。当 `range` 为 `false` 时，使用 `number`，否则用 `[number, number]` | number|number[] | 0 or [0, 0]
nzIncluded | 是否包含。`marks` 不为空对象时有效，值为 true 时表示值为包含关系，false 表示并列 | Boolean | true
nzDisabled | 是否禁用。值为 `true` 时，滑块为禁用状态 | Boolean | false
nzVertical | 竖直显示。添加该属性时，Slider 为垂直方向。 | attribute | -
nzOnAfterChange | 与 `onmouseup` 触发时机一致，把当前值作为参数传入。 | Function(value) | 无
nzTipFormatter | Slider 会把当前值传给 `nzTipFormatter`，并在 `Tooltip` 中显示 `nzTipFormatter` 的返回值，若为 `null`，则隐藏 `Tooltip`。 | Function(value) | null | (value) => value