Slider 滑动输入控件

export const VerticalSlider = () => {
  const style = {
    height: 400
  };
  return (
    <div >
      <Row>
        <Col md={2}>
          <div style={style}>
            <Slider defaultValue={50} vertical />
          </div>
        </Col>

        <Col md={2}>
          <div style={style}>
            <Slider defaultValue={50} vertical progress />
          </div>
        </Col>
        <Col md={2}>
          <div style={style}>
            <RangeSlider defaultValue={[10, 50]} vertical />
          </div>
        </Col>
        <Col md={2}>
          <div style={style}>
            <Slider
              defaultValue={50}
              min={0}
              step={10}
              max={100}
              graduated
              vertical
              progress
            />
          </div>
        </Col>
        <Col md={2}>
          <div style={style}>
            <RangeSlider
              min={0}
              step={10}
              max={100}
              defaultValue={[10, 50]}
              vertical
              graduated
            />
          </div>
        </Col>
        <Col md={2}>
          <div style={style}>
            <Slider
              defaultValue={50}
              min={0}
              step={10}
              max={100}
              graduated
              vertical
              progress
              renderMark={mark => {
                return <span>{mark} °C</span>;
              }}
            />
          </div>
        </Col>
      </Row>
    </div>
  );
};
ReactDOM.render(<VerticalSlider />);

function Example1() {
  const [value, setValue] = React.useState(0);
  return (
    <Row>
      <Col md={10}>
        <Slider
          progress
          style={{ marginTop: 16 }}
          value={value}
          onChange={value => {
            setValue(value);
          }}
        />
      </Col>
      <Col md={4}>
        <InputNumber
          min={0}
          max={100}
          value={value}
          onChange={value => {
            setValue(value);
          }}
        />
      </Col>
    </Row>
  );
}

function Example2() {
  const [value, setValue] = React.useState([10, 50]);
  return (
    <Row>
      <Col md={10}>
        <RangeSlider
          progress
          style={{ marginTop: 16 }}
          value={value}
          onChange={value => {
            setValue(value);
          }}
        />
      </Col>
      <Col md={8}>
        <InputGroup>
          <InputNumber
            min={0}
            max={100}
            value={value[0]}
            onChange={nextValue => {
              const [start, end] = value;
              if (nextValue > end) {
                return;
              }
              setValue([nextValue, end]);
            }}
          />
          <InputGroup.Addon>to</InputGroup.Addon>
          <InputNumber
            min={0}
            max={100}
            value={value[1]}
            onChange={nextValue => {
              const [start, end] = value;
              if (start > nextValue) {
                return;
              }
              setValue([start, nextValue]);
            }}
          />
        </InputGroup>
      </Col>
    </Row>
  );
}

function Example3() {
  const [value, setValue] = React.useState([10, 100]);
  return (
    <Row>
      <p>固定其中一个选项</p>
      <Col md={10}>
        <RangeSlider
          progress
          style={{ marginTop: 16 }}
          value={value}
          onChange={value => {
            setValue([value[0], 100]);
          }}
        />
      </Col>
      <Col md={8}>
        <InputGroup>
          <InputNumber
            min={0}
            max={100}
            value={value[0]}
            onChange={nextValue => {
              const [start, end] = value;
              if (nextValue > end) {
                return;
              }
              setValue([nextValue, end]);
            }}
          />
          <InputGroup.Addon>to</InputGroup.Addon>
          <InputNumber min={0} max={100} value={value[1]} disabled />
        </InputGroup>
      </Col>
    </Row>
  );
}

const instance = (
  <div>
    <Example1 />
    <hr />
    <Example2 />
    <hr />
    <Example3 />
  </div>
);

ReactDOM.render(instance);

class CustomSlider extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: 0
    };
  }
  render() {
    const labels = ['A', 'B', 'C', 'D'];
    const { value } = this.state;
    const handleStyle = {
      color: '#fff',
      fontSize: 12,
      width: 32,
      height: 22
    };

    return (
      <div >
        <div style={{ width: 200, marginLeft: 20 }}>
          <Slider
            min={0}
            max={labels.length - 1}
            value={value}
            className="custom-slider"
            handleStyle={handleStyle}
            graduated
            tooltip={false}
            handleTitle={labels[value]}
            onChange={v => {
              this.setState({ value: v });
            }}
          />
        </div>
      </div>
    );
  }
}
ReactDOM.render(<CustomSlider />);