cnd-components-mcp/componentData/components/Range/examples.md

An MCP service for Cnd components query | 一个减少 Cnd 组件代码生成幻觉的 MCP 服务，包含系统提示词、组件文档、API 文档、代码示例和更新日志查询

## 示例
```tsx
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>
  );
};

export const meta = {
  title: '基础形态',
  describe: '通过设置reverse选择配置方向，通过设置slider为double可配置双滑块。',
};

```
```tsx
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={4} style={style} max={10} hasTip />
      <h4 style={h4Style}>禁用</h4>
      <Range defaultValue={4} style={style} max={10} disabled />
    </div>
  );
};

export const meta = {
  title: '基础形态交互（以从左向右配置为例）',
  describe: '基础交互形态。',
};

```
```tsx
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={4} marks={10} max={10} style={style} hasTip />
      <h4 style={h4Style}>禁用</h4>
      <Range defaultValue={4} marks={10} max={10} style={style} disabled />
    </div>
  );
};

export const meta = {
  title: '基础带刻度交互（以从左向右配置为例）',
  describe: '通过设置marks配置刻度数值显示逻辑。',
};

```
## 更多示例
```tsx
```
```tsx
```
```tsx
```
```tsx
```
```tsx
```
```tsx
```