1# slider开发指导
2
3
4slider为滑动条组件，用来快速调节音量、亮度等。具体用法请参考[slider](../reference/apis-arkui/arkui-js/js-components-basic-slider.md)。
5
6
7## 创建slider组件
8
9在pages/index目录下的hml文件中创建一个slider组件。
10
11
12
13```html
14<!-- xxx.hml -->
15<div class="container">
16  <slider></slider>
17</div>
18```
19
20```css
21/* xxx.css */
22.container {
23  width: 100%;
24  height: 100%;
25  background-color: #F1F3F5;
26  flex-direction: column;
27  justify-content: center;
28  align-items: center;
29}
30```
31
32
33![zh-cn_image_0000001176072876](figures/zh-cn_image_0000001176072876.gif)
34
35
36## 设置样式和属性
37
38slider组件通过color、selected-color、block-color样式分别为滑动条设置背景颜色、已选择颜色和滑块颜色。
39
40
41```html
42<!-- xxx.hml -->
43<div class="container">
44  <slider class= "sli"></slider>
45</div>
46```
47
48
49```css
50/* xxx.css */
51.container {
52  width: 100%;
53  height: 100%;
54  flex-direction: column;
55  justify-content: center;
56  align-items: center;
57  background-color: #F1F3F5;
58}
59.sli{
60  color: #fcfcfc;
61  scrollbar-color: aqua;
62  background-color: #b7e3f3;
63}
64```
65
66![zh-cn_image_0000001227661529](figures/zh-cn_image_0000001227661529.gif)
67
68通过添加mix、max、value、step、mode属性分别为滑动条设置最小值、最大值、初始值、滑动步长和滑动条样式。
69
70
71```html
72<!-- xxx.hml -->
73<div class="container">
74  <slider min="0" max="100" value="1" step="2" mode="inset" showtips="true"></slider>
75</div>
76```
77
78
79```css
80/* xxx.css */
81.container {
82  width: 100%;
83  height: 100%;
84  flex-direction: column;
85  justify-content: center;
86  align-items: center;
87  background-color: #F1F3F5;
88}
89```
90
91![zh-cn_image_0000001179438692](figures/zh-cn_image_0000001179438692.gif)
92
93> **说明：**
94>
95> mode属性为滑动条样式，可选值为：
96>
97> - outset：滑块在滑杆上。
98>
99> - inset：滑块在滑杆内。
100
101
102## 绑定事件
103
104向slider组件添加change事件，添加时需要传入ChangeEvent参数。
105
106
107```html
108<!-- xxx.hml -->
109<div class="container">
110  <text>slider start value is {{startValue}}</text>
111  <text>slider current value is {{currentValue}}</text>
112  <text>slider end value is {{endValue}}</text>
113  <slider min="0" max="100" value="{{value}}" onchange="setvalue"></slider>
114</div>
115```
116
117
118```css
119/* xxx.css */
120.container {
121  width: 100%;
122  height: 100%;
123  flex-direction: column;
124  justify-content: center;
125  align-items: center;
126  background-color: #F1F3F5;
127}
128```
129
130
131```js
132// xxx.js
133export default {
134  data: {
135    value: 0,
136    startValue: 0,
137    currentValue: 0,
138    endValue: 0,
139  },
140  setvalue(e) {
141    if (e.mode == "start") {
142      this.value = e.value;
143      this.startValue = e.value;
144    } else if (e.mode == "move") {
145      this.value = e.value;
146      this.currentValue = e.value;
147    } else if (e.mode == "end") {
148      this.value = e.value;
149      this.endValue = e.value;
150    }
151  }
152}
153```
154
155![zh-cn_image_0000001176551446](figures/zh-cn_image_0000001176551446.gif)
156
157
158## 场景示例
159
160开发者可以通过调整滑动条的值来改变图片大小，并且动态打印当前图片的宽和高。
161
162
163```html
164<!-- xxx.hml -->
165<div class="container">
166  <image src="common/landscape3.jpg" style=" width: {{WidthVal}}px;height:{{HeightVal}}px;margin-top: -150px;"></image>
167  <div class="txt">
168    <slider min="0" max="100" value="{{value}}" onchange="setvalue"></slider>
169    <text>The width of this picture is    {{WidthVal}}</text>
170    <text>The height of this picture is  {{HeightVal}}</text>
171  </div>
172</div>
173```
174
175
176```css
177/* xxx.css */
178.container {
179  width: 100%;
180  height: 100%;
181  flex-direction: column;
182  justify-content: center;
183  align-items: center;
184  background-color: #F1F3F5;
185}
186.txt{
187  flex-direction: column;
188  justify-content: center;
189  align-items: center;
190  position: fixed;
191  top: 65%;
192}
193text{
194  margin-top: 30px;
195}
196```
197
198
199```js
200// xxx.js
201export default{
202  data: {
203    value: 0,
204    WidthVal: 200,
205    HeightVal: 200
206  },
207  setvalue(e) {
208    this.WidthVal = 200 + e.value;
209    this.HeightVal = 200 + e.value
210  }
211}
212```
213
214![zh-cn_image_0000001263038799](figures/zh-cn_image_0000001263038799.gif)
215
216
217## 相关实例
218
219针对slider开发，有以下相关实例可供参考：
220
221- [slider组件的使用（JS）（API9）](https://gitee.com/openharmony/codelabs/tree/master/JSUI/SliderApplication)
222
223- [简易视频播放器（JS）（API9）](https://gitee.com/openharmony/codelabs/tree/master/Media/VideoOpenHarmony)