1# slider开发指导 2 3 4slider为滑动条组件，用来快速调节音量、亮度等。具体用法请参考[slider](../reference/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 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 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 92 93> **说明：** 94> mode属性为滑动条样式，可选值为： 95> 96> - outset：滑块在滑杆上； 97> 98> - inset：滑块在滑杆内。 99 100 101## 绑定事件 102 103向Rating组件添加change事件，添加时需要传入ChangeEvent参数。 104 105 106```html 107<!-- xxx.hml --> 108<div class="container"> 109 <text>slider start value is {{startValue}}</text> 110 <text>slider current value is {{currentValue}}</text> 111 <text>slider end value is {{endValue}}</text> 112 <slider min="0" max="100" value="{{value}}" onchange="setvalue"></slider> 113</div> 114``` 115 116 117```css 118/* xxx.css */ 119.container { 120 width: 100%; 121 height: 100%; 122 flex-direction: column; 123 justify-content: center; 124 align-items: center; 125 background-color: #F1F3F5; 126} 127``` 128 129 130```js 131// xxx.js 132export default { 133 data: { 134 value: 0, 135 startValue: 0, 136 currentValue: 0, 137 endValue: 0, 138 }, 139 setvalue(e) { 140 if (e.mode == "start") { 141 this.value = e.value; 142 this.startValue = e.value; 143 } else if (e.mode == "move") { 144 this.value = e.value; 145 this.currentValue = e.value; 146 } else if (e.mode == "end") { 147 this.value = e.value; 148 this.endValue = e.value; 149 } 150 } 151} 152``` 153 154 155 156 157## 场景示例 158 159开发者可以通过调整滑动条的值来改变图片大小，并且动态打印当前图片的宽和高。 160 161 162```html 163<!-- xxx.hml --> 164<div class="container"> 165 <image src="common/landscape3.jpg" style=" width: {{WidthVal}}px;height:{{HeightVal}}px;margin-top: -150px;"></image> 166 <div class="txt"> 167 <slider min="0" max="100" value="{{value}}" onchange="setvalue"></slider> 168 <text>The width of this picture is {{WidthVal}}</text> 169 <text>The height of this picture is {{HeightVal}}</text> 170 </div> 171</div> 172``` 173 174 175```css 176/* xxx.css */ 177.container { 178 width: 100%; 179 height: 100%; 180 flex-direction: column; 181 justify-content: center; 182 align-items: center; 183 background-color: #F1F3F5; 184} 185.txt{ 186 flex-direction: column; 187 justify-content: center; 188 align-items: center; 189 position: fixed; 190 top: 65%; 191} 192text{ 193 margin-top: 30px; 194} 195``` 196 197 198```js 199// xxx.js 200export default{ 201 data: { 202 value: 0, 203 WidthVal: 200, 204 HeightVal: 200 205 }, 206 setvalue(e) { 207 this.WidthVal = 200 + e.value; 208 this.HeightVal = 200 + e.value 209 } 210} 211``` 212 213 214 215 216## 相关实例 217 218针对slider开发，有以下相关实例可供参考： 219 220- [`JsComponentCollection`：JS组件集合（JS）（API9）](https://gitee.com/openharmony/applications_app_samples/tree/OpenHarmony-3.2-Release/code/UI/JsComponentClollection/JsComponentCollection)
