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'));

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

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 可以指定滑块按钮初始位置。