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