• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# slider
2<!--Kit: ArkUI-->
3<!--Subsystem: ArkUI-->
4<!--Owner: @liyi0309-->
5<!--Designer: @liyi0309-->
6<!--Tester: @lxl007-->
7<!--Adviser: @HelloCrease-->
8
9>  **说明：**
10>
11> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
12
13滑动条组件，用来快速调节设置值，如音量、亮度等。
14
15
16## 子组件
17
18不支持。
19
20
21## 属性
22
23除支持[通用属性](js-components-common-attributes.md)外，还支持以下属性：
24
25| 名称 | 类型 | 默认值 | 必填 | 描述 |
26| -------- | -------- | -------- | -------- | -------- |
27| min | number | 0 | 否 | 滑动选择器的最小值。 |
28| max | number | 100 | 否 | 滑动选择器的最大值。 |
29| step | number | 1 | 否 | 每次滑动的步长。 |
30| value | number | 0 | 否 | 滑动选择器的初始值。 |
31| mode<sup>5+</sup> | string | outset | 否 | 滑动条样式：<br/>-&nbsp;outset：滑块在滑杆上；<br/>-&nbsp;inset：滑块在滑杆内。 |
32| showsteps<sup>5+</sup> | boolean | false | 否 | 是否显示步长标识。true表示显示步长标识，false表示不显示步长标识。 |
33| showtips<sup>5+</sup> | boolean | false | 否 | 滑动时是否有气泡提示百分比。true表示有气泡提示百分比，false表示没有气泡提示百分比。 |
34
35
36## 样式
37
38除支持[通用样式](js-components-common-styles.md)外，还支持如下样式：
39
40| 名称 | 类型 | 默认值 | 必填 | 描述 |
41| -------- | -------- | -------- | -------- | -------- |
42| color | &lt;color&gt; | #19000000 | 否 | 滑动条的背景颜色。 |
43| selected-color | &lt;color&gt; | #ff007dff | 否 | 滑动条的已选择颜色。 |
44| block-color | &lt;color&gt; | \#ffffff | 否 | 滑动条的滑块颜色。 |
45
46
47## 事件
48
49除支持[通用事件](js-components-common-events.md)外，还支持如下事件：
50
51| 名称 | 参数 | 描述 |
52| -------- | -------- | -------- |
53| change | ChangeEvent | 选择值发生变化时触发该事件。 |
54
55**表1** ChangeEvent
56
57| 属性 | 类型 | 说明 |
58| -------- | -------- | -------- |
59| value<sup>5+</sup> | number | 当前slider的进度值。 |
60| mode<sup>5+</sup> | string | 当前change事件的类型，可选值为：<br/>-&nbsp;start：slider的值开始改变。<br/>-&nbsp;move：slider的值跟随手指拖动中。<br/>-&nbsp;end：slider的值结束改变。<br/>-&nbsp;click：slider的值在点击进度条后改变。 |
61
62
63## 示例
64
65```html
66<!-- xxx.hml -->
67<div class="container">
68    <slider min="0" max="100" value="{{ value }}" mode="outset" showtips="true"></slider>
69    <slider class="slider" min="0" max="100" value="{{ value }}" step="20" mode="inset"  showtips="true"></slider>
70    <slider class="slider" min="0" max="100" value="{{ value }}" showsteps="true" step="20" mode="inset"  showtips="false"></slider>
71</div>
72```
73
74```css
75/* xxx.css */
76.container {
77    flex-direction: column;
78    justify-content: center;
79    align-items: center;
80}
81.slider{
82    margin-top: 100px;
83}
84```
85
86
87![zh-cn_image_0000001173324709](figures/slider.png)
88
89
90