logoAnt Design

⌘ K
  • 设计
  • 研发
  • 组件
  • 博客
  • 资源
  • 国内镜像
5.25.2
  • 组件总览
  • 通用
    • Button按钮
    • FloatButton悬浮按钮
      5.0.0
    • Icon图标
    • Typography排版
  • 布局
    • Divider分割线
    • Flex弹性布局
      5.10.0
    • Grid栅格
    • Layout布局
    • Space间距
    • Splitter分隔面板
      5.21.0
  • 导航
    • Anchor锚点
    • Breadcrumb面包屑
    • Dropdown下拉菜单
    • Menu导航菜单
    • Pagination分页
    • Steps步骤条
    • Tabs标签页
  • 数据录入
    • AutoComplete自动完成
    • Cascader级联选择
    • Checkbox多选框
    • ColorPicker颜色选择器
      5.5.0
    • DatePicker日期选择框
    • Form表单
    • Input输入框
    • InputNumber数字输入框
    • Mentions提及
    • Radio单选框
    • Rate评分
    • Select选择器
    • Slider滑动输入条
    • Switch开关
    • TimePicker时间选择框
    • Transfer穿梭框
    • TreeSelect树选择
    • Upload上传
  • 数据展示
    • Avatar头像
    • Badge徽标数
    • Calendar日历
    • Card卡片
    • Carousel走马灯
    • Collapse折叠面板
    • Descriptions描述列表
    • Empty空状态
    • Image图片
    • List列表
    • Popover气泡卡片
    • QRCode二维码
      5.1.0
    • Segmented分段控制器
    • Statistic统计数值
    • Table表格
    • Tag标签
    • Timeline时间轴
    • Tooltip文字提示
    • Tour漫游式引导
      5.0.0
    • Tree树形控件
  • 反馈
    • Alert警告提示
    • Drawer抽屉
    • Message全局提示
    • Modal对话框
    • Notification通知提醒框
    • Popconfirm气泡确认框
    • Progress进度条
    • Result结果
    • Skeleton骨架屏
    • Spin加载中
    • Watermark水印
      5.1.0
  • 其他
    • Affix固钉
    • App包裹组件
      5.1.0
    • ConfigProvider全局化配置
    • Util工具类
      5.13.0

Slider
滑动输入条

滑动型输入器,展示当前值和可选范围。
使用import { Slider } from "antd";
源码components/slider
文档
编辑此页更新日志

相关资源

Ant Design X
Ant Design Charts
Ant Design Pro
Pro Components
Ant Design Mobile
Ant Design Mini
Ant Design Web3
Ant Design Landing-首页模板集
Scaffolds-脚手架市场
Umi-React 应用开发框架
dumi-组件/文档研发工具
qiankun-微前端框架
Ant Motion-设计动效
国内镜像站点 🇨🇳

社区

Awesome Ant Design
Medium
Twitter
yuque logoAnt Design 语雀专栏
Ant Design 知乎专栏
体验科技专栏
seeconf logoSEE Conf-蚂蚁体验科技大会
加入我们

帮助

GitHub
更新日志
常见问题
报告 Bug
议题
讨论区
StackOverflow
SegmentFault

Ant XTech logo更多产品

yuque logo语雀-构建你的数字花园
AntV logoAntV-数据可视化解决方案
Egg logoEgg-企业级 Node.js 框架
Kitchen logoKitchen-Sketch 工具集
Galacean logoGalacean-互动图形解决方案
xtech logo蚂蚁体验科技
主题编辑器
Made with ❤ by
蚂蚁集团和 Ant Design 开源社区

何时使用

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

代码演示

Disabled:
基本

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

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
带 icon 的滑块

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

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
事件

当 Slider 的值发生改变时,会触发 onChange 事件,并把改变后的值作为参数传入。在 mouseup 或者 keyup 时,会触发 onChangeComplete 事件,并把当前值作为参数传入。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
0°C26°C37°C100°C
垂直

垂直方向的 Slider。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Reversed:
反向

设置 reverse 可以将滑动条置反。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
多点组合

范围多个点组合。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
带输入框的滑块

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

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
自定义提示

使用 tooltip.formatter 可以格式化 Tooltip 的内容,设置 tooltip.formatter={null},则隐藏 Tooltip。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code

included=true

0°C26°C37°C100°C
0°C26°C37°C100°C

included=false

0°C26°C37°C100°C

marks & step

0°C26°C37°C100°C

step=null

0°C26°C37°C100°C
带标签的滑块

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

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
控制 ToolTip 的显示

当 tooltip.open 为 true 时,将始终显示 ToolTip;反之则始终不显示,即使在拖动、移入时也是如此。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
范围可拖拽

可以设置 range.draggableTrack,使得范围刻度整体可拖拽。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
动态增减节点

点击添加节点,拖出或者按键删除节点。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
5.20.0

API

通用属性参考:通用属性

参数说明类型默认值版本
autoFocus自动获取焦点booleanfalse
classNames语义化结构 classNameRecord<SemanticDOM, string>-5.10.0
defaultValue设置初始取值。当 range 为 false 时,使用 number,否则用 [number, number]number | [number, number]0 | [0, 0]
disabled值为 true 时,滑块为禁用状态booleanfalse
keyboard支持使用键盘操作 handlerbooleantrue5.2.0+
dots是否只能拖拽到刻度上booleanfalse
includedmarks 不为空对象时有效,值为 true 时表示值为包含关系,false 表示并列booleantrue
marks刻度标记,key 的类型必须为 number 且取值在闭区间 [min, max] 内,每个标签可以单独设置样式object{ number: ReactNode } or { number: { style: CSSProperties, label: ReactNode } }
max最大值number100
min最小值number0
range双滑块模式boolean | rangefalse
reverse反向坐标轴booleanfalse
step步长,取值必须大于 0,并且可被 (max - min) 整除。当 marks 不为空对象时,可以设置 step 为 null,此时 Slider 的可选值仅有 marks、min 和 maxnumber | null1
styles语义化结构 stylesRecord<SemanticDOM, React.CSSProperties>-5.10.0
tooltip设置 Tooltip 相关属性tooltip-4.23.0
value设置当前取值。当 range 为 false 时,使用 number,否则用 [number, number]number | [number, number]-
vertical值为 true 时,Slider 为垂直方向booleanfalse
onChangeComplete与 mouseup 和 keyup 触发时机一致,把当前值作为参数传入(value) => void-
onChange当 Slider 的值发生改变时,会触发 onChange 事件,并把改变后的值作为参数传入(value) => void-

range

参数说明类型默认值版本
draggableTrack范围刻度是否可被拖拽booleanfalse
editable启动动态增减节点,不能和 draggableTrack 一同使用booleanfalse5.20.0
minCount配置 editable 时,最小节点数量number05.20.0
maxCount配置 editable 时,最大节点数量number-5.20.0

tooltip

参数说明类型默认值版本
autoAdjustOverflow是否自动调整弹出位置booleantrue5.8.0
open值为 true 时,Tooltip 将会始终显示;否则始终不显示,哪怕在拖拽及移入时boolean-4.23.0
placement设置 Tooltip 展示位置。参考 Tooltipstring-4.23.0
getPopupContainerTooltip 渲染父节点,默认渲染到 body 上(triggerNode) => HTMLElement() => document.body4.23.0
formatterSlider 会把当前值传给 formatter,并在 Tooltip 中显示 formatter 的返回值,若为 null,则隐藏 Tooltipvalue => ReactNode | nullIDENTITY4.23.0

方法

名称描述版本
blur()移除焦点
focus()获取焦点

Semantic DOM

  • root
    5.23.0
    根元素
  • track
    5.10.0
    范围选择下,点和点之间单个选取条
  • tracks
    5.10.0
    范围选择下,整个范围选取条
  • rail
    5.10.0
    背景条元素
  • handle
    5.10.0
    抓取点元素

主题变量(Design Token)

组件 Token如何定制?
Token 名称描述类型默认值
controlSize滑动输入高度number10
dotActiveBorderColor圆点激活态边框颜色string#91caff
dotBorderColor圆点边框颜色string#f0f0f0
dotSize滑块圆点尺寸number8
handleActiveColor滑块激活态边框色string#1677ff
handleActiveOutlineColor滑块激活态外框色stringrgba(22,119,255,0.2)
handleColor滑块颜色string#91caff
handleColorDisabled滑块禁用颜色string#bfbfbf
handleLineWidth滑块边框宽度string | number2
handleLineWidthHover滑块边框宽度(悬浮态)string | number2.5
handleSize滑块尺寸number10
handleSizeHover滑块尺寸(悬浮态)number12
railBg轨道背景色stringrgba(0,0,0,0.04)
railHoverBg轨道背景色(悬浮态)stringrgba(0,0,0,0.06)
railSize轨道高度number4
trackBg轨道已覆盖部分背景色string#91caff
trackBgDisabled轨道禁用态背景色stringrgba(0,0,0,0.04)
trackHoverBg轨道已覆盖部分背景色(悬浮态)string#69b1ff
全局 Token如何定制?