Slider滑动输入条

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

何时使用

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

代码演示

Disabled:

基本

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

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 的滑块

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

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 事件，并把当前值作为参数传入。

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。

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 可以将滑动条置反。

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;

带输入框的滑块

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

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。

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

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

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；反之则始终不显示，即使在拖动、移入时也是如此。

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，使得范围刻度整体可拖拽。

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	支持清除, 单选模式有效	boolean	false
defaultValue	设置初始取值。当 `range` 为 false 时，使用 number，否则用 [number, number]	number \| [number, number]	0 \| [0, 0]
disabled	值为 true 时，滑块为禁用状态	boolean	false
dots	是否只能拖拽到刻度上	boolean	false
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	false
reverse	反向坐标轴	boolean	false
step	步长，取值必须大于 0，并且可被 (max - min) 整除。当 `marks` 不为空对象时，可以设置 `step` 为 null，此时 Slider 的可选值仅有 marks 标出来的部分	number \| null	1
tooltip	设置 Tooltip 相关属性	tooltip	-	4.23.0
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	4.10.0

参数	说明	类型	默认值	版本
open	值为 true 时，Tooltip 将会始终显示；否则始终不显示，哪怕在拖拽及移入时	boolean	-	4.23.0
placement	设置 Tooltip 展示位置。参考 Tooltip	string	-	4.23.0
getPopupContainer	Tooltip 渲染父节点，默认渲染到 body 上	(triggerNode) => HTMLElement	() => document.body	4.23.0
formatter	Slider 会把当前值传给 `formatter`，并在 Tooltip 中显示 `formatter` 的返回值，若为 null，则隐藏 Tooltip	value => ReactNode \| null	IDENTITY	4.23.0

方法

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

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;

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; }

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;

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;

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;

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;

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;

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;

API

参数	说明	类型	默认值	版本
allowClear	支持清除, 单选模式有效	boolean	false
defaultValue	设置初始取值。当 `range` 为 false 时，使用 number，否则用 [number, number]	number \| [number, number]	0 \| [0, 0]
disabled	值为 true 时，滑块为禁用状态	boolean	false
dots	是否只能拖拽到刻度上	boolean	false
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	false
reverse	反向坐标轴	boolean	false
step	步长，取值必须大于 0，并且可被 (max - min) 整除。当 `marks` 不为空对象时，可以设置 `step` 为 null，此时 Slider 的可选值仅有 marks 标出来的部分	number \| null	1
tooltip	设置 Tooltip 相关属性	tooltip	-	4.23.0
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	4.10.0

参数	说明	类型	默认值	版本
open	值为 true 时，Tooltip 将会始终显示；否则始终不显示，哪怕在拖拽及移入时	boolean	-	4.23.0
placement	设置 Tooltip 展示位置。参考 Tooltip	string	-	4.23.0
getPopupContainer	Tooltip 渲染父节点，默认渲染到 body 上	(triggerNode) => HTMLElement	() => document.body	4.23.0
formatter	Slider 会把当前值传给 `formatter`，并在 Tooltip 中显示 `formatter` 的返回值，若为 null，则隐藏 Tooltip	value => ReactNode \| null	IDENTITY	4.23.0

名称

描述

版本

blur()

移除焦点

focus()

获取焦点

Ant Design

Slider滑动输入条

Ant Design

Slider滑动输入条

何时使用

代码演示

included=true

included=false

marks & step

step=null

API

range

tooltip

方法

何时使用

代码演示

included=true

included=false

marks & step

step=null

API

range

tooltip

方法