# slider

> phone 12+ | 2in1 13+ | tablet 12+ | tv 19+ | wearable 18+

> 说明
>
> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。

滑动条组件，用来快速调节设置值，如音量、亮度等。

## 子组件

不支持。

## 属性

除支持[通用属性](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-components-common-attributes)外，还支持以下属性：

|名称|类型|默认值|必填|描述|
|:------------|:------|:-----|:-|:---------------------------------------------|
|min|number|0|否|滑动条的最小值。|
|max|number|100|否|滑动条的最大值。|
|step|number|1|否|每次滑动的步长。|
|value|number|0|否|滑动条的初始值。|
|mode^5+^|string|outset|否|滑动条样式： - outset：滑块在滑杆上； - inset：滑块在滑杆内。|
|showsteps^5+^|boolean|false|否|是否显示步长标识。true表示显示步长标识，false表示不显示步长标识。|
|showtips^5+^|boolean|false|否|滑动时是否有气泡提示百分比。true表示有气泡提示百分比，false表示没有气泡提示百分比。|

## 样式

除支持[通用样式](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-components-common-styles)外，还支持如下样式：

|名称|类型|默认值|必填|描述|
|:-------------|:------|:--------|:-|:---------|
|color|<color>|#19000000|否|滑动条的背景颜色。|
|selected-color|<color>|#ff007dff|否|滑动条的已选择颜色。|
|block-color|<color>|#ffffff|否|滑动条的滑块颜色。|

## 事件

除支持[通用事件](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-components-common-events)外，还支持如下事件：

|名称|参数|描述|
|:-----|:----------|:-------------|
|change|ChangeEvent|选择值发生变化时触发该事件。|

**表1** ChangeEvent

|属性|类型|说明|
|:--------|:-----|:---------------------------------------------------------------------------------------------------|
|value^5+^|number|当前滑动条的进度值。|
|mode^5+^|string|当前change事件的类型，可选值为： - start：滑动条的值开始改变。 - move：滑动条的值跟随手指拖动中。 - end：滑动条的值结束改变。 - click：滑动条的值在点击进度条后改变。|

## 示例

```html
<!-- xxx.hml -->
<div class="container">
    <slider min="0" max="100" value="{{ value }}" mode="outset" showtips="true"></slider>
    <slider class="slider" min="0" max="100" value="{{ value }}" step="20" mode="inset"  showtips="true"></slider>
    <slider class="slider" min="0" max="100" value="{{ value }}" showsteps="true" step="20" mode="inset"  showtips="false"></slider>
</div>
```

```css
/* xxx.css */
.container {
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.slider{
    margin-top: 100px;
}
```

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/57/v3/YXYHYG4BQV2EqeCUEHqW1w/zh-cn_image_0000002733276818.png?HW-CC-KV=V1&HW-CC-Date=20260917T084651Z&HW-CC-Expire=31536000000&HW-CC-Sign=3D16E9C4B62152F6BFEB900C8DF3AC0EFF0CE161005AD82A39105B1AF85B8E7B)