ant-design/components/slider/demo/icon-slider.md

带 icon 的滑块

• order: 2

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

---

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