---
title: Slider - 滑块
path: /Slider
nav:
  order: 1
  title: 桌面组件
  path: /design
group:
  order: 3
  title: 数据录入
  path: /dataInput
---

滑块（滑动型输入器），是帮助用户在连续或间断的区间内，通过滑动来选择合适数值（一个数值或范围数值）的控件。

## 基础滑块

由游标和滑动轴组成的基础滑块，有单游标滑块和双游标两种类型。布局方向可分为横向滑块和纵向滑块。

### 横向滑块

<code src="./demos/horizon.tsx" />

### 纵向滑块

<code src="./demos/vertical.tsx" />

## 禁用状态的滑块

<code src="./demos/disabled.tsx" />

## 带刻度值的滑块

可对滑块进行刻度值的配置，对滑块有更清晰的描述。

### 横向滑块

<code src="./demos/degreeHorizon.tsx" />

### 纵向滑块

<code src="./demos/degreeVertical.tsx" />

## 带数字输入框的滑块

组件内提供数字输入框，可进行搭配使用，帮用户对数值进行精确输入、快速的调整。

<code src="./demos/numberInput.tsx" />

## API

| 参数                     | 说明                                                                                                                                           | 类型                         | 默认值                                                                          |
| ------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ------------------------------------------------------------------------------- |
| allowClear               | 支持清除, 单选模式有效                                                                                                                         | boolean                      | false                                                                           |
| defaultValue             | 设置初始取值。当 `range` 为 false 时，使用 number，否则用 \[number, number]                                                                    | number \| \[number, number]  | 0 \| \[0, 0]                                                                    |
| disabled                 | 值为 true 时，滑块为禁用状态                                                                                                                   | boolean                      | false                                                                           |
| dots                     | 是否只能拖拽到刻度上                                                                                                                           | boolean                      | false                                                                           |
| getTooltipPopupContainer | Tooltip 渲染父节点，默认渲染到 body 上                                                                                                         | (triggerNode) => HTMLElement | () => document.body                                                             |
| included                 | `marks` 不为空对象时有效，值为 true 时表示值为包含关系，false 表示并列                                                                         | boolean                      | true                                                                            |
| marks                    | 刻度标记，key 的类型必须为 `number` 且取值在闭区间 \[min, max] 内，每个标签可以单独设置样式                                                    | object                       | { number: ReactNode } or { number: { style: CSSProperties, label: ReactNode } } |
| max                      | 最大值                                                                                                                                         | number                       | 100                                                                             |
| min                      | 最小值                                                                                                                                         | number                       | 0                                                                               |
| range                    | 双滑块模式                                                                                                                                     | boolean \| [range](#range)   | false                                                                           |
| reverse                  | 反向坐标轴                                                                                                                                     | boolean                      | false                                                                           |
| step                     | 步长，取值必须大于 0，并且可被 (max - min) 整除。当 `marks` 不为空对象时，可以设置 `step` 为 null，此时 Slider 的可选值仅有 marks 标出来的部分 | number \| null               | 1                                                                               |
| tipFormatter             | Slider 会把当前值传给 `tipFormatter`，并在 Tooltip 中显示 `tipFormatter` 的返回值，若为 null，则隐藏 Tooltip                                   | value => ReactNode \| null   | IDENTITY                                                                        |
| tooltipPlacement         | 设置 Tooltip 展示位置。参考 [Tooltip](/components/tooltip/)                                                                                    | string                       | -                                                                               |
| tooltipVisible           | 值为 true 时，Tooltip 将会始终显示；否则始终不显示，哪怕在拖拽及移入时                                                                         | boolean                      | -                                                                               |
| value                    | 设置当前取值。当 `range` 为 false 时，使用 number，否则用 \[number, number]                                                                    | number \| \[number, number]  | -                                                                               |
| vertical                 | 值为 true 时，Slider 为垂直方向                                                                                                                | boolean                      | false                                                                           |
| onAfterChange            | 与 `onmouseup` 触发时机一致，把当前值作为参数传入                                                                                              | (value) => void              | -                                                                               |
| onChange                 | 当 Slider 的值发生改变时，会触发 onChange 事件，并把改变后的值作为参数传入                                                                     | (value) => void              | -                                                                               |

### range

| 参数           | 说明                 | 类型    | 默认值 |
| -------------- | -------------------- | ------- | ------ |
| draggableTrack | 范围刻度是否可被拖拽 | boolean | false  |

## 方法

| 名称    | 描述     |
| ------- | -------- |
| blur()  | 移除焦点 |
| focus() | 获取焦点 |