Slider滑动输入条

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

何时使用

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

代码演示

Slider滑动输入条 - 图1

基本

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

  1. import { Slider, Switch } from 'antd';
  2. class Demo extends React.Component {
  3. state = {
  4. disabled: false,
  5. };
  6. handleDisabledChange = disabled => {
  7. this.setState({ disabled });
  8. };
  9. render() {
  10. const { disabled } = this.state;
  11. return (
  12. <div>
  13. <Slider defaultValue={30} disabled={disabled} />
  14. <Slider range defaultValue={[20, 50]} disabled={disabled} />
  15. Disabled: <Switch size="small" checked={disabled} onChange={this.handleDisabledChange} />
  16. </div>
  17. );
  18. }
  19. }
  20. ReactDOM.render(<Demo />, mountNode);

Slider滑动输入条 - 图2

带 icon 的滑块

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

  1. import { Slider } from 'antd';
  2. import { FrownOutlined, SmileOutlined } from '@ant-design/icons';
  3. class IconSlider extends React.Component {
  4. state = {
  5. value: 0,
  6. };
  7. handleChange = value => {
  8. this.setState({ value });
  9. };
  10. render() {
  11. const { max, min } = this.props;
  12. const { value } = this.state;
  13. const mid = ((max - min) / 2).toFixed(5);
  14. const preColorCls = value >= mid ? '' : 'icon-wrapper-active';
  15. const nextColorCls = value >= mid ? 'icon-wrapper-active' : '';
  16. return (
  17. <div className="icon-wrapper">
  18. <FrownOutlined className={preColorCls} />
  19. <Slider {...this.props} onChange={this.handleChange} value={value} />
  20. <SmileOutlined className={nextColorCls} />
  21. </div>
  22. );
  23. }
  24. }
  25. ReactDOM.render(<IconSlider min={0} max={20} />, mountNode);
  1. .icon-wrapper {
  2. position: relative;
  3. padding: 0px 30px;
  4. }
  5. .icon-wrapper .anticon {
  6. position: absolute;
  7. top: -2px;
  8. width: 16px;
  9. height: 16px;
  10. line-height: 1;
  11. font-size: 16px;
  12. color: rgba(0, 0, 0, 0.25);
  13. }
  14. .icon-wrapper .icon-wrapper-active {
  15. color: rgba(0, 0, 0, 0.45);
  16. }
  17. .icon-wrapper .anticon:first-child {
  18. left: 0;
  19. }
  20. .icon-wrapper .anticon:last-child {
  21. right: 0;
  22. }

Slider滑动输入条 - 图3

事件

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

  1. import { Slider } from 'antd';
  2. function onChange(value) {
  3. console.log('onChange: ', value);
  4. }
  5. function onAfterChange(value) {
  6. console.log('onAfterChange: ', value);
  7. }
  8. ReactDOM.render(
  9. <div>
  10. <Slider defaultValue={30} onChange={onChange} onAfterChange={onAfterChange} />
  11. <Slider
  12. range
  13. step={10}
  14. defaultValue={[20, 50]}
  15. onChange={onChange}
  16. onAfterChange={onAfterChange}
  17. />
  18. </div>,
  19. mountNode,
  20. );

Slider滑动输入条 - 图4

垂直

垂直方向的 Slider。

  1. import { Slider } from 'antd';
  2. const style = {
  3. display: 'inline-block',
  4. height: 300,
  5. marginLeft: 70,
  6. };
  7. const marks = {
  8. 0: '0°C',
  9. 26: '26°C',
  10. 37: '37°C',
  11. 100: {
  12. style: {
  13. color: '#f50',
  14. },
  15. label: <strong>100°C</strong>,
  16. },
  17. };
  18. ReactDOM.render(
  19. <div>
  20. <div style={style}>
  21. <Slider vertical defaultValue={30} />
  22. </div>
  23. <div style={style}>
  24. <Slider vertical range step={10} defaultValue={[20, 50]} />
  25. </div>
  26. <div style={style}>
  27. <Slider vertical range marks={marks} defaultValue={[26, 37]} />
  28. </div>
  29. </div>,
  30. mountNode,
  31. );

Slider滑动输入条 - 图5

反向

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

  1. import { Slider, Switch } from 'antd';
  2. class Demo extends React.Component {
  3. state = {
  4. reverse: true,
  5. };
  6. handleReverseChange = reverse => {
  7. this.setState({ reverse });
  8. };
  9. render() {
  10. const { reverse } = this.state;
  11. return (
  12. <div>
  13. <Slider defaultValue={30} reverse={reverse} />
  14. <Slider range defaultValue={[20, 50]} reverse={reverse} />
  15. Reversed: <Switch size="small" checked={reverse} onChange={this.handleReverseChange} />
  16. </div>
  17. );
  18. }
  19. }
  20. ReactDOM.render(<Demo />, mountNode);

Slider滑动输入条 - 图6

带输入框的滑块

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

  1. import { Slider, InputNumber, Row, Col } from 'antd';
  2. class IntegerStep extends React.Component {
  3. state = {
  4. inputValue: 1,
  5. };
  6. onChange = value => {
  7. this.setState({
  8. inputValue: value,
  9. });
  10. };
  11. render() {
  12. const { inputValue } = this.state;
  13. return (
  14. <Row>
  15. <Col span={12}>
  16. <Slider
  17. min={1}
  18. max={20}
  19. onChange={this.onChange}
  20. value={typeof inputValue === 'number' ? inputValue : 0}
  21. />
  22. </Col>
  23. <Col span={4}>
  24. <InputNumber
  25. min={1}
  26. max={20}
  27. style={{ marginLeft: 16 }}
  28. value={inputValue}
  29. onChange={this.onChange}
  30. />
  31. </Col>
  32. </Row>
  33. );
  34. }
  35. }
  36. class DecimalStep extends React.Component {
  37. state = {
  38. inputValue: 0,
  39. };
  40. onChange = value => {
  41. if (isNaN(value)) {
  42. return;
  43. }
  44. this.setState({
  45. inputValue: value,
  46. });
  47. };
  48. render() {
  49. const { inputValue } = this.state;
  50. return (
  51. <Row>
  52. <Col span={12}>
  53. <Slider
  54. min={0}
  55. max={1}
  56. onChange={this.onChange}
  57. value={typeof inputValue === 'number' ? inputValue : 0}
  58. step={0.01}
  59. />
  60. </Col>
  61. <Col span={4}>
  62. <InputNumber
  63. min={0}
  64. max={1}
  65. style={{ marginLeft: 16 }}
  66. step={0.01}
  67. value={inputValue}
  68. onChange={this.onChange}
  69. />
  70. </Col>
  71. </Row>
  72. );
  73. }
  74. }
  75. ReactDOM.render(
  76. <div>
  77. <IntegerStep />
  78. <DecimalStep />
  79. </div>,
  80. mountNode,
  81. );

Slider滑动输入条 - 图7

自定义提示

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

  1. import { Slider } from 'antd';
  2. function formatter(value) {
  3. return `${value}%`;
  4. }
  5. ReactDOM.render(
  6. <div>
  7. <Slider tipFormatter={formatter} />
  8. <Slider tipFormatter={null} />
  9. </div>,
  10. mountNode,
  11. );

Slider滑动输入条 - 图8

带标签的滑块

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

  1. import { Slider } from 'antd';
  2. const marks = {
  3. 0: '0°C',
  4. 26: '26°C',
  5. 37: '37°C',
  6. 100: {
  7. style: {
  8. color: '#f50',
  9. },
  10. label: <strong>100°C</strong>,
  11. },
  12. };
  13. ReactDOM.render(
  14. <div>
  15. <h4>included=true</h4>
  16. <Slider marks={marks} defaultValue={37} />
  17. <Slider range marks={marks} defaultValue={[26, 37]} />
  18. <h4>included=false</h4>
  19. <Slider marks={marks} included={false} defaultValue={37} />
  20. <h4>marks & step</h4>
  21. <Slider marks={marks} step={10} defaultValue={37} />
  22. <h4>step=null</h4>
  23. <Slider marks={marks} step={null} defaultValue={37} />
  24. </div>,
  25. mountNode,
  26. );

Slider滑动输入条 - 图9

控制 ToolTip 的显示

tooltipVisibletrue 时,将始终显示 ToolTip;反之则始终不显示,即使在拖动、移入时也是如此。

  1. import { Slider } from 'antd';
  2. ReactDOM.render(<Slider defaultValue={30} tooltipVisible />, mountNode);

API

参数说明类型默认值版本
allowClear支持清除, 单选模式有效booleanfalse
defaultValue设置初始取值。当 rangefalse 时,使用 number,否则用 [number, number]number|number[]0 or [0, 0]
disabled值为 true 时,滑块为禁用状态booleanfalse
dots是否只能拖拽到刻度上booleanfalse
includedmarks 不为空对象时有效,值为 true 时表示值为包含关系,false 表示并列booleantrue
marks刻度标记,key 的类型必须为 number 且取值在闭区间 [min, max] 内,每个标签可以单独设置样式object{ number: string|ReactNode } or { number: { style: object, label: string|ReactNode } }
max最大值number100
min最小值number0
range双滑块模式booleanfalse
reverse反向坐标轴booleanfalse
step步长,取值必须大于 0,并且可被 (max - min) 整除。当 marks 不为空对象时,可以设置 stepnull,此时 Slider 的可选值仅有 marks 标出来的部分。number|null1
tipFormatterSlider 会把当前值传给 tipFormatter,并在 Tooltip 中显示 tipFormatter 的返回值,若为 null,则隐藏 Tooltip。Function|nullIDENTITY
value设置当前取值。当 rangefalse 时,使用 number,否则用 [number, number]number|number[]
vertical值为 true 时,Slider 为垂直方向Booleanfalse
onAfterChangeonmouseup 触发时机一致,把当前值作为参数传入。Function(value)NOOP
onChange当 Slider 的值发生改变时,会触发 onChange 事件,并把改变后的值作为参数传入。Function(value)NOOP
tooltipPlacement设置 Tooltip 展示位置。参考 Tooltipstring
tooltipVisible值为true时,Tooltip 将会始终显示;否则始终不显示,哪怕在拖拽及移入时。Boolean
getTooltipPopupContainerTooltip 渲染父节点,默认渲染到 body 上。Function() => document.body

方法

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