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

## 日期双滑块

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

开发日期：2021-08-13 周五

开发者：[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.SliderRangeDate />;
```

## API

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

### data

| 参数    | 说明                              | 类型   |
| ------- | --------------------------------- | ------ |
| min     | 范围-最小值：当前时间-min 单位    | number |
| max     | 范围-最小值：当前时间+max 单位    | number |
| initMin | 初始最小值：当前时间-initMin 单位 | number |
| initMax | 初始最大值：当前时间+initMax 单位 | number |
| step    | 步福：每次滑动 step 单位          | number |

### ordinary

| 参数             | 说明                | 类型                       |
| ---------------- | ------------------- | -------------------------- |
| picker           | 日期（维度）        | 'day' \| 'month' \| 'year' |
| dateFormat       | 日期（格式）        | string                     |
| 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": {
      "picker": "day",
      "dateFormat": "YYYY年MM月DD日",

      "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": 120,
      "tooltipHeight": 24,
      "tooltipBGColor": "#6c6c6c",
      "tooltipRadius": 6,
      "tooltipFonts": {
        "color": "#fff",
        "fontFamily": "PingFangSC, 'Microsoft YaHei', 'Helvetica Neue', Arial, sans-serif",
        "fontSize": 12,
        "fontWeight": "normal"
      }
    }
  },
  "dataSource": {
    "data": "{\"min\":15,\"max\":15,\"initMin\":3,\"initMax\":3,\"step\":1}",
    "fields": {
      "s": {
        "optional": true,
        "description": "系列(可选)"
      },
      "y": {
        "description": "值"
      },
      "x": {
        "description": "类目"
      }
    },
    "type": "static",
    "description": "定位接口"
  },
  "size": {
    "height": 35,
    "width": 320
  }
}
```

## 过滤器默认配置

```javascript
const obj = {
  // 范围-最小值：当前时间-min单位
  min: 15,
  // 范围-最大值：当前时间+max单位
  max: 15,
  // 初始最小值：当前时间-initMin单位
  initMin: 3,
  // 初始最大值：当前时间+initMax单位
  initMax: 3,
  // 步福：每次滑动step单位
  step: 1,
};

return obj;
```