---
order: 16
group:
  title: 文本
  order: 40
---

## 双滑块

滑块选择可以在连续或间断的区间内，通过滑动锚点来选择一个合适的数值。这种交互特性使得它在设置诸如音量，亮度，色彩饱和度等需要反映强度等级的选项时是一种极好的选择。

开发日期：2021-08-10 周二

开发者：[wujie](http://portal.gtcloud.cn/web/guest/address?p_p_id=organization_WAR_gtplatformportlet&p_p_lifecycle=2&p_p_state=normal&p_p_mode=view&p_p_cacheability=cacheLevelPage&p_p_col_id=column-1&p_p_col_count=1&_organization_WAR_gtplatformportlet_cmd=selectOrgUserAndOtherPhoneByUserCode&_organization_WAR_gtplatformportlet_userCode=15001283&_organization_WAR_gtplatformportlet_orgUnitCode=50084580&t=1628600906387)

相关开发者：黄家星、王志畅

产品经理：泮薇薇

```tsx
import React from 'react';
import * as Charts from 'edata-charts';

export default () => <Charts.SliderRange />;
```

## API

| 参数     | 说明     | 类型   |
| -------- | -------- | ------ |
| ordinary | 面板参数 | object |
| size     | 组件大小 | object |

### ordinary

| 参数             | 说明                | 类型                 |
| ---------------- | ------------------- | -------------------- |
| max              | 最大值              | number               |
| min              | 最小值              | number               |
| step             | 步幅                | number               |
| railBorderRadius | 边框圆角            | number               |
| railBgColor      | 未选中颜色          | string               |
| trackColorLinear | 选中颜色渐变        | boolean              |
| trackBgColor1    | 选中渐变色-起始颜色 | string               |
| trackBgColor2    | 选中渐变色-结束颜色 | string               |
| trackBgColor     | 选中颜色            | string               |
| handleSize       | 滑块大小            | number               |
| isCustomHandle   | 滑块是否自定义图标  | boolean              |
| customHandle     | 自定义滑块 IconFont | string               |
| handleBGColor    | 滑块背景颜色        | string               |
| handleType       | 滑块边框类型        | string               |
| handleRadius     | 滑块边框圆角        | number               |
| handleBorderSize | 滑块边框大小        | number               |
| handleColor      | 滑块边框颜色        | string               |
| tooltipPlacement | 提示框位置          | **TooltipPlacement** |
| tooltipVisible   | 提示是否常显        | boolean              |
| tooltipWidth     | 提示样式宽度        | number               |
| tooltipHeight    | 提示框高度          | number               |
| tooltipPrefix    | 提示文字前缀        | string               |
| tooltipSuffix    | 提示文字后缀        | string               |
| tooltipBGColor   | 提示框背景颜色      | string               |
| tooltipRadius    | 提示框圆角          | number               |
| tooltipFonts     | 提示框字体          | **FontType**         |

### size

| 参数   | 说明 | 类型   |
| ------ | ---- | ------ |
| height | 高度 | number |
| width  | 高度 | number |

### FontType

| 参数       | 说明     | 类型   |
| ---------- | -------- | ------ |
| color      | 颜色     | string |
| fontFamily | 字体     | string |
| fontWeight | 字体粗细 | string |
| fontSize   | 字体大小 | number |

### TooltipPlacement

| 参数             | 说明   | 类型                                   |
| ---------------- | ------ | -------------------------------------- |
| TooltipPlacement | string | 'top' \| 'left' \| 'right' \| 'bottom' |

## 默认配置

```json
{
  "attr": {
    "ordinary": {
      "min": 0,
      "max": 100,

      "step": 5,

      "railBorderRadius": 2,
      "railBgColor": "#555",

      "trackColorLinear": false,
      "trackBgColor": "#91d5ff",

      "handleSize": 50,
      "isCustomHandle": true,
      "customHandle": "icon-huakuai01",
      "handleBGColor": "#1c2126",
      "handleType": "solid",
      "handleRadius": 2,
      "handleBorderSize": 2,
      "handleColor": "#91d5ff",

      "tooltipPlacement": "top",
      "tooltipVisible": true,
      "tooltipPadding": 20,
      "tooltipWidth": 40,
      "tooltipHeight": 24,
      "tooltipPrefix": "",
      "tooltipSuffix": "%",
      "tooltipBGColor": "#6c6c6c",
      "tooltipRadius": 6,
      "tooltipFonts": {
        "color": "#fff",
        "fontFamily": "PingFangSC, 'Microsoft YaHei', 'Helvetica Neue', Arial, sans-serif",
        "fontSize": 12,
        "fontWeight": "normal"
      }
    }
  },
  "dataSource": {
    "data": "[{\"content\":\"家人守护\",\"url\":\"\",\"id\":0,\"imgSrc\":\"\",\"new\":0},{\"content\":\"入园异常\",\"url\":\"\",\"id\":1,\"imgSrc\":\"\",\"new\":0},{\"content\":\"服务人员\",\"url\":\"\",\"id\":2,\"imgSrc\":\"\",\"new\":0}]",
    "fields": {
      "s": {
        "optional": true,
        "description": "系列(可选)"
      },
      "y": {
        "description": "值"
      },
      "x": {
        "description": "类目"
      }
    },
    "type": "static",
    "description": "定位接口"
  },
  "size": {
    "height": 30,
    "width": 320
  }
}
```