# 滑动输入条 Slider

- 页面: https://jiguang132.com/zh/resources/arco-design/docs/slider
- 资源: Arco Design (https://jiguang132.com/zh/resources/arco-design.md)
- 全部指南: https://jiguang132.com/zh/resources/arco-design/docs.md

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

## 安装

```bash
npm install @arco-design/web-react@2.66.18
```

在入口引入 `@arco-design/web-react/dist/css/arco.css`，用 `ConfigProvider` 设置语言。React 19 项目还需在入口最先引入 `@arco-design/web-react/es/_util/react-19-adapter`，否则 Message、Modal 等命令式 API 无法渲染。

## 示例

- **基本用法**：基本用法展示。
- **基础状态**：默认态、禁用态。
- **设置步长**：传入 `step` 设置步长。 默认步长为 1。建议设置值能够被 `max-min` 整除，否则会出现可选最大值小于 `max` 的情况。当设置 `showTicks` 为 `true` 的时候，可显示 step 的刻度线。
- **范围选择**：设置 `range = true` 即可开启范围选择，此时 `value` 为数组。
- **多点选择**：范围内多个点选择。(`2.61.0` 支持)
- **显示输入框**：当 `showInput` 为 true 时，将显示输入框。当设置 `onlyMarkValue` 为 `true` 或者范围内多点选择时，输入框始终不会显示。 当 `showInput` 传入 `InputNumberProps` 时，`min`、`max`、`step` 属性会以 `SliderProps` 为先。 **分段输入条设置的分段步长对 InputNumber 无效**
- **添加标签文本**：可以通过传入 `marks` 添加标签文本。当设置 `onlyMarkValue` 的时候，只可以选择节点值。此时`step`会被忽略。
- **带有icon的滑动输入条**：两边带有 icon 表示状态。
- **竖直滑动条**：设置 `vertical` 为 `true`，将会显示竖直的滑动条
- **控制 tooltip 的展示**
- **自定义提示**：使用 `formatterTooltip` 可以格式化 Tooltip 的内容。
- **范围刻度可拖拽**：通过设置 `range.draggableBar` 为 `true`, 让范围刻度可以拖拽。
- **设置范围**：通过 `min` 和 `max` 设置可选范围。
- **反向**：设置 `reverse={true}` ，可以交换滑动条的起点和终点。
- **分段输入条**：在设置了 `marks` 后，实际上将 `Slider` 分成了多个区间，可以传入 `getIntervalConfig` 对每个区间的宽度和步长进行设置。 **注意：会优先将空间分配给传入了 `width`的区间, 剩下的将会按照区间长度分配剩余的空间。**

示例来自 Arco Design 官方仓库（MIT），固定在 npm 2.66.18 对应的提交；部分示例使用在线图片或上传地址，预览中网络请求被禁用。

## API

### Slider

|参数名|描述|类型|默认值|版本|
|---|---|---|---|---|
|disabled|是否禁用|boolean |`-`|-|
|onlyMarkValue|只能选择标签值，此时step将会被忽略|boolean |`-`|-|
|reverse|反向坐标轴, `rtl` 场景默认为 `true`|boolean |`-`|-|
|showTicks|是否显示步长刻度线|boolean |`-`|-|
|tooltipVisible|控制 tooltip 的展示。设置为 `true` 时，将一直展示 tooltip。设置为 `false` 时，将一直隐藏 tooltip。|boolean |`-`|-|
|vertical|是否竖直方向|boolean |`-`|-|
|max|滑动范围最大值|number |`100`|-|
|min|滑动范围最小值|number |`0`|-|
|step|步长|number |`1`|-|
|tooltipPosition|tooltip 的位置|\| 'top'\| 'tl'\| 'tr'\| 'bottom'\| 'bl'\| 'br'\| 'left'\| 'lt'\| 'lb'\| 'right'\| 'rt'\| 'rb' |`-`|-|
|formatTooltip|格式化 `tooltip` 内容|(value: number) => string \| ReactNode |`-`|-|
|className|节点类名|string \| string[] |`-`|-|
|defaultValue|默认值|number \| number[] |`-`|-|
|marks|标签。是一个对象。key 为在[min, max]内的整数。|Record<number, ReactNode> |`-`|-|
|range|是否是范围选择|boolean \| { draggableBar: boolean } |`-`|2.14.0|
|showInput|是否展示输入框，`onlyMarkValue` 为 `true` 或范围内多点选择时输入框始终隐藏。可接受 `InputNumber` 的 `props`。|boolean \| [InputNumberProps](input-number#inputnumber) \| [InputNumberProps](input-number#inputnumber)[] |`-`|`InputNumberProps` in `2.32.0`|
|style|节点样式|CSSProperties |`-`|-|
|value|值|number \| number[] |`-`|-|
|getIntervalConfig|针对区间配置，返回区间步长和相对于整个滑动轴的宽度比例(如 0.5 或 "50%")。**只在`marks`场景下生效**|(range: number[],index: number) => { step?: number; width?: number \| string } |`-`|2.30.0|
|getTooltipContainer|设置 `tooltip` 所插入的父元素|() => Element |`-`|-|
|onAfterChange|触发时机在 `mouseup`，参数是当前值|(val: number \| number[]) => void |`-`|2.20.0|
|onChange|选择值变化时触发|(val: number \| number[]) => void |`-`|-|

---

JGuang 全部资源索引: https://jiguang132.com/llms.txt