Slider 滑动输入条

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

何时使用

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

代码演示

基本

基本滑动条。当 range 为 true 时，渲染为双滑块。当 disabled 为 true 时，滑块处于不可用状态。

import React from 'react';
import ReactDOM from 'react-dom';
import { Slider, Switch } from 'choerodon-ui';
​
class Demo extends React.Component {
  state = {
    disabled: false,
  }
​
  handleDisabledChange = (disabled) => {
    this.setState({ disabled });
  }
​
  render() {
    const { disabled } = this.state;
    return (
      <div>
        <Slider defaultValue={30} disabled={disabled} />
        <Slider range defaultValue={[20, 50]} disabled={disabled} />
        Disabled: <Switch size="small" checked={disabled} onChange={this.handleDisabledChange} />
      </div>
    );
  }
}
​
ReactDOM.render(<Demo />, document.getElementById('container'));
​

带输入框的滑块

和 数字输入框 组件保持同步。

​
import React from 'react';
import ReactDOM from 'react-dom';
import { Slider, InputNumber, Row, Col } from 'choerodon-ui';
​
class IntegerStep extends React.Component {
  state = {
    inputValue: 1,
  }
​
  onChange = (value) => {
    this.setState({
      inputValue: value,
    });
  }
​
  render() {
    return (
      <Row>
        <Col span={12}>
          <Slider min={1} max={20} onChange={this.onChange} value={this.state.inputValue} />
        </Col>
        <Col span={4}>
          <InputNumber
            min={1}
            max={20}
            style={{ marginLeft: 16 }}
            value={this.state.inputValue}
            onChange={this.onChange}
          />
        </Col>
      </Row>
    );

带 icon 的滑块

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

import React from 'react';
import ReactDOM from 'react-dom';
import { Slider, Icon } from 'choerodon-ui';
​
class IconSlider extends React.Component {
  state = {
    value: 0,
  }
​
  handleChange = (value) => {
    this.setState({ value });
  }
​
  render() {
    const { max, min } = this.props;
    const { value } = this.state;
    const mid = ((max - min) / 2).toFixed(5);
    const preColor = value >= mid ? '' : 'rgba(0, 0, 0, .45)';
    const nextColor = value >= mid ? 'rgba(0, 0, 0, .45)' : '';
    return (
      <div className="icon-wrapper">
        <Icon style={{ color: preColor }} type="frown-o" />
        <Slider {...this.props} onChange={this.handleChange} value={value} />
        <Icon style={{ color: nextColor }} type="smile-o" />
      </div>
    );
  }
}
​
ReactDOM.render(<IconSlider min={0} max={20} />, document.getElementById('container'));
​

自定义提示

使用 tipFormatter 可以格式化 Tooltip 的内容，设置 tipFormatter={null}，则隐藏 Tooltip。

import React from 'react';
import ReactDOM from 'react-dom';
import { Slider } from 'choerodon-ui';
​
function formatter(value) {
  return `${value}%`;
}
​
ReactDOM.render(
  <div>
    <Slider tipFormatter={formatter} />
    <Slider tipFormatter={null} />
  </div>,
  document.getElementById('container'),
);
​

事件

当 Slider 的值发生改变时，会触发 onChange 事件，并把改变后的值作为参数传入。在 onmouseup 时，会触发 onAfterChange 事件，并把当前值作为参数传入。

import React from 'react';
import ReactDOM from 'react-dom';
import { Slider } from 'choerodon-ui';
​
function onChange(value) {
  console.log('onChange: ', value);
}
​
function onAfterChange(value) {
  console.log('onAfterChange: ', value);
}
​
ReactDOM.render(
  <div>
    <Slider defaultValue={30} onChange={onChange} onAfterChange={onAfterChange} />
    <Slider
      range
      step={10}
      defaultValue={[20, 50]}
      onChange={onChange}
      onAfterChange={onAfterChange}
    />
  </div>,
  document.getElementById('container'),
);
​

带标签的滑块

使用 marks 属性标注分段式滑块，使用 value / defaultValue 指定滑块位置。当 included=false 时，表明不同标记间为并列关系。当 step=null 时，Slider 的可选值仅有 marks 标出来的部分。

import React from 'react';
import ReactDOM from 'react-dom';
import { Slider } from 'choerodon-ui';
​
const marks = {
  0: '0°C',
  26: '26°C',
  37: '37°C',
  100: {
    style: {
      color: '#f50',
    },
    label: <strong>100°C</strong>,
  },
};
​
ReactDOM.render(
  <div>
    <h4>included=true</h4>
    <Slider marks={marks} defaultValue={37} />
    <Slider range marks={marks} defaultValue={[26, 37]} />
​
    <h4>included=false</h4>
    <Slider marks={marks} included={false} defaultValue={37} />
​
    <h4>marks & step</h4>
    <Slider marks={marks} step={10} defaultValue={37} />
​
    <h4>step=null</h4>
    <Slider marks={marks} step={null} defaultValue={37} />
  </div>,
  document.getElementById('container'));
​

API

方法