---
name: "slider"
mode: "component"
versionRequirements:
  - { name: "基础库", version: "2.10.0" }
title: "slider - 滑动选择器"
---

## slider

> [VERSION] 基础库 >= 2.10.0

### 描述

滑动选择器，可设置范围与步长。

### 属性

| 属性 | 类型 | 必填 | 默认值 | 描述 |
| --- | --- | --- | --- | --- |
| `name` | `string` | 否 | - | 在表单中的字段名 |
| `min` | `number` | 否 | `0` | 最小值 |
| `max` | `number` | 否 | `100` | 最大值 |
| `step` | `number` | 否 | `1` | 步长，取值须大于 0 且能被 (max - min) 整除 |
| `value` | `number` | 否 | `0` | 当前取值 |
| `show-value` | `boolean` | 否 | `false` | 是否显示当前 value |
| `active-color` | `string` | 否 | `""` | 已选择的颜色 |
| `background-color` | `string` | 否 | `""` | 背景条的颜色 |
| `block-size` | `number` | 否 | `28` | 滑块的大小，取值范围 12~28 |
| `block-color` | `string` | 否 | `""` | 滑块的颜色 |
| `disabled` | `boolean` | 否 | `false` | 是否禁用 |

#### 事件

| 事件名 | 类型 | 描述 |
| --- | --- | --- |
| `change` | `(event: SliderChangeEvent) => void` | 拖动完成后触发 |
| `changing` | `(event: SliderChangingEvent) => void` | 拖动过程中持续触发 |

**SliderChangeEvent**

| 字段 | 类型 | 说明 |
| --- | --- | --- |
| `type` | `"change"` | 事件类型 |
| `detail` | `SliderEventDetail` | 事件数据 |

**SliderChangingEvent**

| 字段 | 类型 | 说明 |
| --- | --- | --- |
| `type` | `"changing"` | 事件类型 |
| `detail` | `SliderEventDetail` | 事件数据 |

### 示例代码

#### 基础用法

*index.tyml*

```xml
<view>
  <slider value="{{val}}" show-value bind:change="onChange" />
  <text>当前值: {{val}}</text>
</view>
```

*index.tyss*

```css
slider {
  width: 100%;
  margin: 20rpx 0;
}
```

*index.js*

```javascript
Page({
  data: { val: 50 },
  onChange(e) {
    this.setData({ val: e.detail.value });
  },
});
```

#### 自定义范围、步长与颜色

*index.tyml*

```xml
<view>
  <slider min="{{0}}" max="{{1000}}" step="{{100}}" show-value bind:change="onStepChange" />
  <slider value="{{50}}" active-color="orange" block-color="pink" background-color="#e0e0e0" bind:change="onColorChange" />
</view>
```

*index.tyss*

```css
slider {
  margin: 20rpx;
}
```

*index.js*

```javascript
Page({
  onStepChange(e) {
    console.log('步长值:', e.detail.value);
  },
  onColorChange(e) {
    console.log('颜色值:', e.detail.value);
  },
});
```

#### 禁用与拖动事件

*index.tyml*

```xml
<view>
  <slider disabled="{{true}}" value="{{40}}" />
  <slider block-size="{{18}}" show-value bind:changing="onChanging" bind:change="onChange" />
</view>
```

*index.tyss*

```css
slider {
  margin: 20rpx;
}
```

*index.js*

```javascript
Page({
  onChanging(e) {
    console.log('拖动中:', e.detail.value);
  },
  onChange(e) {
    console.log('拖动结束:', e.detail.value);
  },
});
```