从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
高级筛选
API version全部版本
设备全部
元服务API集不筛选
API参考概述
应用框架
系统
媒体
图形
应用服务
AI
公共基础能力
标准库
您当前正在浏览HarmonyOS最新文档，覆盖已发布的所有API版本，可在API参考中筛选您使用的API版本。详细的版本配套关系请参考版本说明。
slider
Phone12+PC/2in113+Tablet12+TV19+Wearable18+
更新时间: 2026-08-29 09:41
复制页面
说明
滑动条组件，用来快速调节设置值，如音量、亮度等。
子组件
不支持。
属性
除支持通用属性外，还支持以下属性：
展开
| 名称 | 类型 | 默认值 | 必填 | 描述 |
|---|---|---|---|---|
| min | number | 0 | 否 | 滑动条的最小值。 |
| max | number | 100 | 否 | 滑动条的最大值。 |
| step | number | 1 | 否 | 每次滑动的步长。 |
| value | number | 0 | 否 | 滑动条的初始值。 |
| mode5+ | string | outset | 否 | 滑动条样式： - outset：滑块在滑杆上； - inset：滑块在滑杆内。 |
| showsteps5+ | boolean | false | 否 | 是否显示步长标识。true表示显示步长标识，false表示不显示步长标识。 |
| showtips5+ | boolean | false | 否 | 滑动时是否有气泡提示百分比。true表示有气泡提示百分比，false表示没有气泡提示百分比。 |
样式
除支持通用样式外，还支持如下样式：
展开
| 名称 | 类型 | 默认值 | 必填 | 描述 |
|---|---|---|---|---|
| color | <color> | #19000000 | 否 | 滑动条的背景颜色。 |
| selected-color | <color> | #ff007dff | 否 | 滑动条的已选择颜色。 |
| block-color | <color> | #ffffff | 否 | 滑动条的滑块颜色。 |
事件
除支持通用事件外，还支持如下事件：
展开
| 名称 | 参数 | 描述 |
|---|---|---|
| change | ChangeEvent | 选择值发生变化时触发该事件。 |
表1 ChangeEvent
展开
| 属性 | 类型 | 说明 |
|---|---|---|
| value5+ | number | 当前滑动条的进度值。 |
| mode5+ | string | 当前change事件的类型，可选值为： - start：滑动条的值开始改变。 - move：滑动条的值跟随手指拖动中。 - end：滑动条的值结束改变。 - click：滑动条的值在点击进度条后改变。 |
示例
收起
自动换行
深色代码主题
复制
- <!-- 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>
收起
自动换行
深色代码主题
复制
- /* xxx.css */
- .container {
- flex-direction: column;
- justify-content: center;
- align-items: center;
- }
- .slider{
- margin-top: 100px;
- }
华为开发者联盟 版权所有 ©2026