Slider 滑动输入条

import { Slider } from 'antd';

ReactDOM.render(<div>
  <Slider defaultValue={30} />
  <Slider range defaultValue={[20, 50]} />
  <Slider range defaultValue={[20, 50]} disabled />
</div>
, mountNode);

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']} />
, mountNode);

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

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} />
  <Slider defaultValue={30} onAfterChange={log} />
</div>
, mountNode);

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>, mountNode);

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>
, mountNode);

import { Slider } from 'antd';

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

ReactDOM.render(<div>
  <Slider tipFormatter={formatter} />
  <Slider tipFormatter={null} />
</div>, mountNode);