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

带 icon 的滑块

• order: 2

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

---

var Slider = antd.Slider;
var Icon = antd.Icon;

var IconSlider = React.createClass({
  getInitialState() {
    var max = this.props.max;
    var min = this.props.min;
    var 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) {
    var preIcon, nextIcon;

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

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