滑动输入条 Slider

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

安装

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