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