logoAnt Design

⌘ K
  • 设计
  • 研发
  • 组件
  • 博客
  • 资源
5.5.1
  • 组件总览
  • 通用
    • Button按钮
    • Icon图标
    • Typography排版
  • 布局
    • Divider分割线
    • Grid栅格
    • Layout布局
    • Space间距
  • 导航
    • Anchor锚点
    • Breadcrumb面包屑
    • Dropdown下拉菜单
    • Menu导航菜单
    • Pagination分页
    • Steps步骤条
  • 数据录入
    • AutoComplete自动完成
    • Cascader级联选择
    • Checkbox多选框
    • ColorPicker颜色选择器New
    • 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二维码
    • Segmented分段控制器
    • Statistic统计数值
    • Table表格
    • Tabs标签页
    • Tag标签
    • Timeline时间轴
    • Tooltip文字提示
    • Tour漫游式引导
    • Tree树形控件
  • 反馈
    • Alert警告提示
    • Drawer抽屉
    • Message全局提示
    • Modal对话框
    • Notification通知提醒框
    • Popconfirm气泡确认框
    • Progress进度条
    • Result结果
    • Skeleton骨架屏
    • Spin加载中
  • 其他
    • Affix固钉
    • App包裹组件
    • ConfigProvider全局化配置
    • FloatButton悬浮按钮
    • Watermark水印
何时使用
代码演示
基本
带输入框的滑块
带 icon 的滑块
自定义提示
事件
带标签的滑块
垂直
控制 ToolTip 的显示
反向
范围可拖拽
API
range
tooltip
方法
Design Token

Slider滑动输入条

Select选择器Switch开关

相关资源

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

社区

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

帮助

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

Ant XTech更多产品

yuque语雀-构建你的数字花园
AntVAntV-数据可视化解决方案
EggEgg-企业级 Node.js 框架
kitchenKitchen-Sketch 工具集
xtech蚂蚁体验科技
主题编辑器
Made with ❤ by
蚂蚁集团和 Ant Design 开源社区

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

何时使用

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

代码演示

Disabled:
基本

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

expand codeexpand code
TypeScript
JavaScript
import React, { useState } from 'react';
import { Slider, Switch } from 'antd';

const App: React.FC = () => {
  const [disabled, setDisabled] = useState(false);

  const onChange = (checked: boolean) => {
    setDisabled(checked);
  };

  return (
    <>
      <Slider defaultValue={30} disabled={disabled} />
      <Slider range defaultValue={[20, 50]} disabled={disabled} />
      Disabled: <Switch size="small" checked={disabled} onChange={onChange} />
    </>
  );
};

export default App;
带 icon 的滑块

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

expand codeexpand code
TypeScript
JavaScript
import React, { useState } from 'react';
import { FrownOutlined, SmileOutlined } from '@ant-design/icons';
import { Slider } from 'antd';

interface IconSliderProps {
  max: number;
  min: number;
}

const IconSlider: React.FC<IconSliderProps> = (props) => {
  const { max, min } = props;
  const [value, setValue] = useState(0);

  const mid = Number(((max - min) / 2).toFixed(5));
  const preColorCls = value >= mid ? '' : 'icon-wrapper-active';
  const nextColorCls = value >= mid ? 'icon-wrapper-active' : '';

  return (
    <div className="icon-wrapper">
      <FrownOutlined className={preColorCls} />
      <Slider {...props} onChange={setValue} value={value} />
      <SmileOutlined className={nextColorCls} />
    </div>
  );
};

const App: React.FC = () => <IconSlider min={0} max={20} />;

export default App;
.icon-wrapper {
  position: relative;
  padding: 0px 30px;
}

.icon-wrapper .anticon {
  position: absolute;
  top: -2px;
  width: 16px;
  height: 16px;
  color: rgba(0, 0, 0, 0.25);
  font-size: 16px;
  line-height: 1;
}

.icon-wrapper .icon-wrapper-active {
  color: rgba(0, 0, 0, 0.45);
}

.icon-wrapper .anticon:first-child {
  left: 0;
}

.icon-wrapper .anticon:last-child {
  right: 0;
}
事件

当 Slider 的值发生改变时,会触发 onChange 事件,并把改变后的值作为参数传入。在 onmouseup 时,会触发 onAfterChange 事件,并把当前值作为参数传入。

expand codeexpand code
TypeScript
JavaScript
import React from 'react';
import { Slider } from 'antd';

const onChange = (value: number | [number, number]) => {
  console.log('onChange: ', value);
};

const onAfterChange = (value: number | [number, number]) => {
  console.log('onAfterChange: ', value);
};

const App: React.FC = () => (
  <>
    <Slider defaultValue={30} onChange={onChange} onAfterChange={onAfterChange} />
    <Slider
      range
      step={10}
      defaultValue={[20, 50]}
      onChange={onChange}
      onAfterChange={onAfterChange}
    />
  </>
);

export default App;
0°C26°C37°C100°C
垂直

垂直方向的 Slider。

expand codeexpand code
TypeScript
JavaScript
import React from 'react';
import { Slider } from 'antd';
import type { SliderMarks } from 'antd/es/slider';

const style: React.CSSProperties = {
  display: 'inline-block',
  height: 300,
  marginLeft: 70,
};

const marks: SliderMarks = {
  0: '0°C',
  26: '26°C',
  37: '37°C',
  100: {
    style: { color: '#f50' },
    label: <strong>100°C</strong>,
  },
};

const App: React.FC = () => (
  <>
    <div style={style}>
      <Slider vertical defaultValue={30} />
    </div>
    <div style={style}>
      <Slider vertical range step={10} defaultValue={[20, 50]} />
    </div>
    <div style={style}>
      <Slider vertical range marks={marks} defaultValue={[26, 37]} />
    </div>
  </>
);

export default App;
Reversed:
反向

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

expand codeexpand code
TypeScript
JavaScript
import React, { useState } from 'react';
import { Slider, Switch } from 'antd';

const App: React.FC = () => {
  const [reverse, setReverse] = useState(true);

  return (
    <>
      <Slider defaultValue={30} reverse={reverse} />
      <Slider range defaultValue={[20, 50]} reverse={reverse} />
      Reversed: <Switch size="small" checked={reverse} onChange={setReverse} />
    </>
  );
};

export default App;
带输入框的滑块

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

expand codeexpand code
TypeScript
JavaScript
import React, { useState } from 'react';
import { Col, InputNumber, Row, Slider, Space } from 'antd';

const IntegerStep: React.FC = () => {
  const [inputValue, setInputValue] = useState(1);

  const onChange = (newValue: number) => {
    setInputValue(newValue);
  };

  return (
    <Row>
      <Col span={12}>
        <Slider
          min={1}
          max={20}
          onChange={onChange}
          value={typeof inputValue === 'number' ? inputValue : 0}
        />
      </Col>
      <Col span={4}>
        <InputNumber
          min={1}
          max={20}
          style={{ margin: '0 16px' }}
          value={inputValue}
          onChange={onChange}
        />
      </Col>
    </Row>
  );
};

const DecimalStep: React.FC = () => {
  const [inputValue, setInputValue] = useState(0);

  const onChange = (value: number) => {
    if (isNaN(value)) {
      return;
    }
    setInputValue(value);
  };

  return (
    <Row>
      <Col span={12}>
        <Slider
          min={0}
          max={1}
          onChange={onChange}
          value={typeof inputValue === 'number' ? inputValue : 0}
          step={0.01}
        />
      </Col>
      <Col span={4}>
        <InputNumber
          min={0}
          max={1}
          style={{ margin: '0 16px' }}
          step={0.01}
          value={inputValue}
          onChange={onChange}
        />
      </Col>
    </Row>
  );
};

const App: React.FC = () => (
  <Space style={{ width: '100%' }} direction="vertical">
    <IntegerStep />
    <DecimalStep />
  </Space>
);

export default App;
自定义提示

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

expand codeexpand code
TypeScript
JavaScript
import React from 'react';
import { Slider } from 'antd';

const formatter = (value: number) => `${value}%`;

const App: React.FC = () => (
  <>
    <Slider tooltip={{ formatter }} />
    <Slider tooltip={{ formatter: null }} />
  </>
);

export default App;

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 标出来的部分。

expand codeexpand code
TypeScript
JavaScript
import React from 'react';
import { Slider } from 'antd';
import type { SliderMarks } from 'antd/es/slider';

const marks: SliderMarks = {
  0: '0°C',
  26: '26°C',
  37: '37°C',
  100: {
    style: {
      color: '#f50',
    },
    label: <strong>100°C</strong>,
  },
};

const App: React.FC = () => (
  <>
    <h4>included=true</h4>
    <Slider marks={marks} defaultValue={37} />
    <Slider range marks={marks} defaultValue={[26, 37]} />

    <h4>included=false</h4>
    <Slider marks={marks} included={false} defaultValue={37} />

    <h4>marks & step</h4>
    <Slider marks={marks} step={10} defaultValue={37} />

    <h4>step=null</h4>
    <Slider marks={marks} step={null} defaultValue={37} />
  </>
);

export default App;
#components-slider-demo-mark h4 {
  margin: 0 0 16px;
}
#components-slider-demo-mark .ant-slider-with-marks {
  margin-bottom: 44px;
}
控制 ToolTip 的显示

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

expand codeexpand code
TypeScript
JavaScript
import React from 'react';
import { Slider } from 'antd';

const App: React.FC = () => <Slider defaultValue={30} tooltip={{ open: true }} />;

export default App;
范围可拖拽

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

expand codeexpand code
TypeScript
JavaScript
import React from 'react';
import { Slider } from 'antd';

const App: React.FC = () => <Slider range={{ draggableTrack: true }} defaultValue={[20, 50]} />;

export default App;

API

参数说明类型默认值版本
allowClear支持清除, 单选模式有效booleanfalse
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 标出来的部分number | null1
tooltip设置 Tooltip 相关属性tooltip-4.23.0
value设置当前取值。当 range 为 false 时,使用 number,否则用 [number, number]number | [number, number]-
vertical值为 true 时,Slider 为垂直方向booleanfalse
onAfterChange与 onmouseup 触发时机一致,把当前值作为参数传入(value) => void-
onChange当 Slider 的值发生改变时,会触发 onChange 事件,并把改变后的值作为参数传入(value) => void-

range

参数说明类型默认值版本
draggableTrack范围刻度是否可被拖拽booleanfalse4.10.0

tooltip

参数说明类型默认值版本
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()获取焦点

Design Token

Global Token

Token 名称描述类型默认值
colorBgContainer组件的容器背景色,例如:默认按钮、输入框等。务必不要将其与 `colorBgElevated` 混淆。string#ffffff
colorBgElevated浮层容器背景色,在暗色模式下该 token 的色值会比 `colorBgContainer` 要亮一些。例如:模态框、弹出框、菜单等。string#ffffff
colorBorderSecondary比默认使用的边框色要浅一级,此颜色和 colorSplit 的颜色一致。使用的是实色。string#f0f0f0
colorFillContentHover控制内容区域背景色在鼠标悬停时的样式。stringrgba(0, 0, 0, 0.15)
colorFillSecondary二级填充色可以较为明显地勾勒出元素形体,如 Rate、Skeleton 等。也可以作为三级填充色的 Hover 状态,如 Table 等。stringrgba(0, 0, 0, 0.06)
colorFillTertiary三级填充色用于勾勒出元素形体的场景,如 Slider、Segmented 等。如无强调需求的情况下,建议使用三级填色作为默认填色。stringrgba(0, 0, 0, 0.04)
colorPrimary品牌色是体现产品特性和传播理念最直观的视觉元素之一。在你完成品牌主色的选取之后,我们会自动帮你生成一套完整的色板,并赋予它们有效的设计语义string#1677ff
colorPrimaryBorder主色梯度下的描边用色,用在 Slider 等组件的描边上。string#91caff
colorPrimaryBorderHover主色梯度下的描边用色的悬浮态,Slider 、Button 等组件的描边 Hover 时会使用。string#69b1ff
colorText最深的文本色。为了符合W3C标准,默认的文本颜色使用了该色,同时这个颜色也是最深的中性色。stringrgba(0, 0, 0, 0.88)
colorTextDescription控制文本描述字体颜色。stringrgba(0, 0, 0, 0.45)
colorTextDisabled控制禁用状态下的字体颜色。stringrgba(0, 0, 0, 0.25)
borderRadiusXSXS号圆角,用于组件中的一些小圆角,如 Segmented 、Arrow 等一些内部圆角的组件样式中。number2
controlHeightAnt Design 中按钮和输入框等基础控件的高度number32
controlHeightLG较高的组件高度number40
controlHeightSM较小的组件高度number24
fontFamilyAnt Design 的字体家族中优先使用系统默认的界面字体,同时提供了一套利于屏显的备用字体库,来维护在不同平台以及浏览器的显示下,字体始终保持良好的易读性和可读性,体现了友好、稳定和专业的特性。string-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'
fontSize设计系统中使用最广泛的字体大小,文本梯度也将基于该字号进行派生。number14
lineHeight文本行高number1.5714285714285714
lineWidth用于控制组件边框、分割线等的宽度number1
motionDurationMid动效播放速度,中速。用于中型元素动画交互string0.2s
motionDurationSlow动效播放速度,慢速。用于大型元素如面板动画交互string0.3s