Range滑块

Range。

何时使用

代码演示

基本使用

带有 range 控件的数字字段。

import { Range } from 'choerodon-ui/pro';
ReactDOM.render(
  <div>
    <Range min={0} max={1} step={0.01} />
    <Range style={{ margin: '0.2rem 0 0 0' }} value={20} min={0} max={100} step={5} disabled />
  </div>,
  mountNode
);

绑定数据源

绑定数据源。

import { DataSet, Range } from 'choerodon-ui/pro';
function handleDataSetChange({ value, oldValue }) {
  console.log('[dataset]', value, '[oldValue]', oldValue);
}
class App extends React.Component {
  ds = new DataSet({
    autoCreate: true,
    fields: [
      { name: 'range', defaultValue: 20, min: 10, max: 100, step: 1 },
    ],
    events: {
      update: handleDataSetChange,
    },
  });
  render() {
    return <Range dataSet={this.ds} name="range" />;
  }
}
ReactDOM.render(
  <App />,
  mountNode
);

受控

受控。

import { Range, TextField } from 'choerodon-ui/pro';
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: 30,
    };
  }
  handleChange = (value) => {
    this.setState({
      value,
    });
  }
  render() {
    return (
      <div>
        <Range onChange={this.handleChange} value={this.state.value} name="range" min={10} max={50} step={1} />
        <TextField style={{ margin: '0.2rem 0 0 0' }} value={this.state.value} />
      </div>
    );
  }
}
ReactDOM.render(
  <App />,
  mountNode
);

垂直

垂直方向的 Range。

import { Range } from 'choerodon-ui/pro';
ReactDOM.render(
  <div style={{ height: 200 }}>
    <Range vertical min={0} max={100} step={5} />
  </div>,
  mountNode
);

API

Range

更多属性请参考 FormField。