/**
 * title: "基础形态"
 * description: "通过设置reverse选择配置方向，通过设置slider为double可配置双滑块。"
 */
import React from 'react';
import { Range } from '@alicloud/console-components';

const style = {
  marginBottom: '15px',
};
const h4Style = {
  fontSize: '12px',
  marginTop: '24px',
};

export default () => {
  return (
    <div>
      <h4 style={h4Style}>指定值（从左向右配置）</h4>
      <Range defaultValue={30} style={style} hasTip={false} />
      <h4 style={h4Style}>指定值（从右向左配置）</h4>
      <Range defaultValue={30} style={style} reverse hasTip={false} />
      <h4 style={h4Style}>指定区间（两端向内配置）</h4>
      <Range slider={'double'} defaultValue={[25, 75]} style={style} />
      <h4 style={h4Style}>指定区间（两端向外配置）</h4>
      <Range slider={'double'} defaultValue={[25, 75]} style={style} reverse />
    </div>
  );
};