Slider 滑动输入条

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

何时使用#

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

API#

参数 类型 默认值 说明
min Number 0 最小值
max Number 100 最大值
step Number or null 1 步长，取值必须大于 0，并且可被 (max - min) 整除。当 marks 不为空对象时，可以设置 step 为 null，此时 Slider 的可选值仅有 marks 标出来的部分。
marks Object {Number: String} {} 分段标记，key 的类型必须为 Number 且取值在闭区间 [min, max] 内
value Number or [Number, Number] 设置当前取值。当 range 为 false 时，使用 Number，否则用 [Number, Number]
defaultValue Number or [Number, Number] 0 or [0, 0] 设置初始取值。当 range 为 false 时，使用 Number，否则用 [Number, Number]
included Boolean true marks 不为空对象时有效，值为 true 时表示值为包含关系，false 表示并列
disabled Boolean false 值为 true 时，滑块为禁用状态
onChange Function NOOP 当 Slider 的值发生改变时，会触发 onChange 事件，并把改变后的值作为参数传入。
tipFormatter Function Slider 会把当前值传给 tipFormatter，并在 Tooltip 中显示 tipFormatter 的返回值。

代码演示 

import { Slider } from 'antd';

ReactDOM.render(<div>
  <Slider defaultValue={30} />
  <Slider range defaultValue={[20, 50]} />
  <Slider range defaultValue={[20, 50]} disabled />
</div>
, document.getElementById('components-slider-demo-basic'));
基本

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

import { Slider, Icon } from 'antd';

const IconSlider = React.createClass({
  getInitialState() {
    const max = this.props.max;
    const min = this.props.min;
    const mid = ((max - min) / 2).toFixed(5);

    return {
      preIconClass: this.props.value >= mid ? '' : 'anticon-highlight',
      nextIconClass: this.props.value >= mid ? 'anticon-highlight' : '',
      mid: mid,
      sliderValue: this.props.value
    };
  },

  handleChange(v) {
    this.setState({
      preIconClass: v >= this.state.mid ? '' : 'anticon-highlight',
      nextIconClass: v >= this.state.mid ? 'anticon-highlight' : '',
      sliderValue: v
    });
  },

  render() {
    return (
      <div className="iconWrapper">
        <Icon className={this.state.preIconClass} type={this.props.icon[0]} />
        <Icon className={this.state.nextIconClass} type={this.props.icon[1]} />
        <Slider {...this.props} onChange={this.handleChange} value={this.state.sliderValue} />
      </div>
    );
  }
});

ReactDOM.render(
<IconSlider min={0} max={20} value={0} icon={['lock', 'unlock']} />
, document.getElementById('components-slider-demo-icon-slider'));
.iconWrapper {
  position: relative;
  padding: 0px 30px;
}

.iconWrapper .anticon {
  position: absolute;
  top: -3px;
  width: 16px;
  height: 16px;
  line-height: 1;
  font-size: 16px;
  color: #ccc;
}

.iconWrapper .anticon-lock {
  left: 0;
}
.iconWrapper .anticon-unlock{
  right: 0;
}

.anticon.anticon-highlight {
  color: #666;
}
带 icon 的滑块

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

import { Slider } from 'antd';

function log(value) {
  console.log(value);
}

ReactDOM.render(
<div>
  <Slider defaultValue={30} onChange={log} />
  <Slider range step={10} defaultValue={[20, 50]} onChange={log} />
</div>
, document.getElementById('components-slider-demo-event'));
事件

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

import { Slider, InputNumber } from 'antd';

const IntegerStep = React.createClass({
  getInitialState() {
    return {
      inputValue: 1
    };
  },
  onChange(value) {
    this.setState({
      inputValue: value
    });
  },
  render() {
    return (
      <div className="row">
        <div className="col-12">
          <Slider min={1} max={20} onChange={this.onChange} value={this.state.inputValue} />
        </div>
        <div className="col-4">
          <InputNumber min={1} max={20} style={{marginLeft: '16px'}}
            value={this.state.inputValue} onChange={this.onChange} />
        </div>
      </div>
    );
  }
});

const DecimalStep = React.createClass({
  getInitialState() {
    return {
      inputValue: 0
    };
  },
  onChange(value) {
    this.setState({
      inputValue: value
    });
  },
  render() {
    return (
      <div className="row">
        <div className="col-12">
          <Slider min={0} max={1} onChange={this.onChange} value={this.state.inputValue} step={0.01} />
        </div>
        <div className="col-4">
          <InputNumber min={0} max={1} style={{marginLeft: '16px'}} step={0.01}
            value={this.state.inputValue} onChange={this.onChange} />
        </div>
      </div>
    );
  }
});

ReactDOM.render(<div>
  <IntegerStep />
  <DecimalStep />
</div>, document.getElementById('components-slider-demo-input-number'));
带输入框的滑块

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

import { Slider } from 'antd';

const marks = {
  0: '0°C',
  26: '26°C',
  37: '37°C',
  100: '100°C'
};

ReactDOM.render(
<div>
  <p>包含关系</p>
  <Slider marks={marks} defaultValue={37} />
  <Slider range marks={marks} defaultValue={[26, 37]} />
  <p>并列关系</p>
  <Slider marks={marks} included={false} defaultValue={37} />
  <p>结合 step</p>
  <Slider marks={marks} step={10} defaultValue={37} />
  <p>`step=null`</p>
  <Slider marks={marks} step={null} defaultValue={37} />
</div>
, document.getElementById('components-slider-demo-mark'));
分段式滑块

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

import { Slider } from 'antd';

function formatter(value) {
  return '$' + value;
}

ReactDOM.render(<Slider tipFormatter={formatter} />
, document.getElementById('components-slider-demo-tip-formatter'));
格式化 Tooltip 内容

使用 tipFormatter 可以格式化 Tooltip 的内容。