# Slider 滑块

[toc]

此组件在原生的基础上扩展了显示当前值和单位的功能。

## 组件引入

在`app.json`或页面`index.json`中引入：

```json
{
  "usingComponents": {
    "tea-slider": "../../dist/slider/index"
  }
}
```

## 用法

-   基本用法

```html
<tea-slider value="20"></tea-slider>
```

-   显示当前值

```html
<tea-slider show-value unit="G" value="20"></tea-slider>
```

-   指定最大值最小值和步长

```html
<tea-slider name="slider" show-value unit="G" min="30" max="80" step="10"></tea-slider>
```

-   改变小球大小

```html
<tea-slider show-value unit="G" value="20" blockSize="{{12}}"></tea-slider>
```

-   禁用状态

```html
<tea-slider show-value unit="G" value="20" disabled></tea-slider>
```

-   绑定事件

```html
<tea-slider value="20" bind:change="sliderChanged"></tea-slider>
```

## Props

| 参数          | 描述                  | 类型        | 默认值     |
| ----------- | ------------------- | --------- | ------- |
| name        | 提交表单时的标志符           | `String`  | -       |
| activeColor | 进度条激活态颜色            | `String`  | -       |
| value       | 当前进度百分比，取值范围为 0-100 | `String`  | `0`     |
| min         | 取值的最大值              | `Number`  | `0`     |
| max         | 取值的最小值              | `Number`  | `100`   |
| step        | 取值步长                | `Number`  | `1`     |
| disabled    | 是否禁用                | `Boolean` | `false` |
| showValue   | 是否显示进度条的值           | `Boolean` | `false` |
| unit        | 进度条的单位              | `String`  | -       |
| blockSize   | 进度条的小球的大小           | `Number`  | `26`    |

## 事件

| 事件名    | 描述       | 回调参数   |
| ------ | -------- | ------ |
| change | 滑动时触发的事件 | 当前滑动的值 |

## 外部样式类

| 类名          | 说明       |
| ----------- | -------- |
| `ext-class` | 组件根节点样式类 |

## CSS变量属性表

| 变量名                                     | 默认值                           | 描述  |
| --------------------------------------- | ----------------------------- | --- |
| slider-progress-height                  | 2px                           | -   |
| slider-progress-background-color        | #e5e5e5                       | -   |
| slider-progress-active-background-color | @form-background-active-color | -   |
| slider-progress-button-background-color | @form-background-base-color   | -   |
| slider-value-text-color                 | @text-color                   | -   |

## 演示

[在开发者工具中预览效果](https://developers.weixin.qq.com/s/fL6jm7mE7GcD)