Slider 滑动输入条

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

何时使用

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

API

参数	类型	默认值	说明
min	Number	0	最小值
max	Number	100	最大值
step	Number	1	步长，取值必须大于 0，并且可被 (max - min) 整除
value	Number		当前取值
defaultValue	Number	0	初始取值
marks	Array	[]	分段标记，标记每一个 step，如果 step 属性没有定义，则 `marks` 属性会被忽略
isIncluded	Boolean	true	分段式滑块，值为 true 时表示值为包含关系，false 表示并列
index	Number		为具备 `step` 或者 `marks` 的 slider 提供滑块操作的当前位置
defaultIndex	Number	0	为具备 `step` 或者 `marks` 的 slider 提供滑块操作的初始位置
disabled	Boolean	false	值为 `true` 时，滑块为 disable 禁用状态

组件演示

var Slider = antd.Slider;

React.render(<div>
  <Slider />
  <Slider defaultValue={65} disabled />
</div>
, document.getElementById('components-slider-demo-basic'));

基本

基本滑动条。

var Slider = antd.Slider;

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

    var preIcon, nextIcon;
    if (this.props.value >= mid) {
      preIcon = this.props.icon[0];
      nextIcon = this.props.icon[1] + ' anticon-highlight';
    } else {
      preIcon = this.props.icon[0] + ' anticon-highlight';
      nextIcon = this.props.icon[1];
    }

    return {
      preIcon: preIcon,
      nextIcon: nextIcon,
      mid: mid,
      sliderValue: this.props.value
    };
  },

  handleChange(v) {
    var preIcon, nextIcon;
    if (v >= this.state.mid) {
      preIcon = this.props.icon[0];
      nextIcon = this.props.icon[1] + ' anticon-highlight';
    } else {
      preIcon = this.props.icon[0] + ' anticon-highlight';
      nextIcon = this.props.icon[1];
    }

    this.setState(
      {
        preIcon: preIcon,
        nextIcon: nextIcon,
        sliderValue: v
      }
    );
  },

  render() {
    return (
      <div className="iconWrapper">
        <i className={this.state.preIcon}></i>
        <i className={this.state.nextIcon}></i>
        <Slider {...this.props} onChange={this.handleChange} value={this.state.sliderValue} />
      </div>
    );
  }
});

React.render(
<IconSlider min={0} max={20} value={0} icon={['anticon anticon-lock', 'anticon anticon-unlock']} />
, document.getElementById('components-slider-demo-icon-slider'));

带 icon 的滑块

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

var Slider = antd.Slider;
var InputNumber = antd.InputNumber;

var Test = 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>
    );
  }
});

React.render(<Test />, document.getElementById('components-slider-demo-input-number'));

带输入框的滑块

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

var Slider = antd.Slider;

React.render(
<div className="sliderContainer">
  <p>包含关系</p>
  <Slider marks={["状态1","状态2","状态3","状态4"]} defaultIndex={1} />
  <p>并列关系</p>
  <Slider marks={["状态1","状态2","状态3","状态4"]} isIncluded={false} defaultIndex={1} />
</div>
, document.getElementById('components-slider-demo-mark'));

分段式滑块

使用 marks 属性标注分段式滑块，结合 index 可以指定滑块按钮初始位置。