Range 滑块

滑动型输入器，展示当前值和可选范围。

何时使用

当用户需要在数值区间/自定义区间内进行选择时，可为连续或离散值。

代码演示

基本使用

带有 range 控件的数字字段。

import React from 'react';
import ReactDOM from 'react-dom';
​
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>,
  document.getElementById('container')
);
​
​

受控

受控。

​
import React from 'react';
import ReactDOM from 'react-dom';
​
import { Range, TextField, Row, Col } from 'choerodon-ui/pro';
​
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: 30,
    };
  }
​
  handleChange = (value) => {
    this.setState({
      value,
    });
  };
​
  render() {
    return (
      <Row>
        <Col span={4}>
          <TextField value={this.state.value} />
        </Col>
        <Col span={20}>
          <Range
            onChange={this.handleChange}
            value={this.state.value}
            name="range"
            min={10}

绑定数据源

绑定数据源。

​
import React from 'react';
import ReactDOM from 'react-dom';
​
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 />,
  document.getElementById('container')

垂直

垂直方向的 Range。

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

API

更多属性请参考 FormField。