1# <slider> Development 2 3 4The **<slider>** component is used to quickly adjust settings, such as the volume and brightness. For details, see [slider](../reference/arkui-js/js-components-basic-slider.md). 5 6 7## Creating a <slider> Component 8 9Create a **<slider>** component in the .hml file under **pages/index**. 10 11 12 13``` 14<!-- xxx.hml --> 15<div class="container"> 16<slider></slider> 17</div> 18``` 19 20 21 22``` 23/* xxx.css */ 24.container { 25 width: 100%; 26 height: 100%; 27 background-color: #F1F3F5; 28 flex-direction: column; 29 justify-content: center; 30 align-items: center; 31} 32``` 33 34 35 36 37 38## Setting Styles and Attributes 39 40Use the **<slider>** component to set the background color, selected color, and slider color using the **color**, **selected-color**, and **block-color** attributes, respectively. 41 42 43``` 44<!-- xxx.hml --> 45<div class="container"> 46 <slider class= "sli"></slider> 47</div> 48``` 49 50 51``` 52/* xxx.css */ 53.container { 54 width: 100%; 55 height: 100%; 56 flex-direction: column; 57 justify-content: center; 58 align-items: center; 59 background-color: #F1F3F5; 60} 61.sli{ 62 color: #fcfcfc; 63 scrollbar-color: aqua; 64 background-color: #b7e3f3; 65} 66``` 67 68 69 70Add the **mix**, **max**, **value**, **step**, and **mode** attributes to set the minimum value, maximum value, initial value, step, and style of the slider. 71 72 73``` 74<!-- xxx.hml --> 75<div class="container"> 76 <slider min="0" max="100" value="1" step="2" mode="inset" showtips="true"></slider> 77</div> 78``` 79 80 81``` 82/* xxx.css */ 83.container { 84 width: 100%; 85 height: 100%; 86 flex-direction: column; 87 justify-content: center; 88 align-items: center; 89 background-color: #F1F3F5; 90} 91``` 92 93 94 95>  **NOTE:** 96> Set the **mode** attribute to specify the slider style. It can be set to: 97> 98> - **outset**: The slider is on the sliding bar. 99> 100> - **inset**: The slider is inside the sliding bar. 101 102 103## Binding Events 104 105Add the **change** event to the **<rating>** component and pass the ChangeEvent attribute when adding the event. 106 107 108``` 109<!-- xxx.hml --> 110<div class="container"> 111 <text>slider start value is {{startValue}}</text> 112 <text>slider current value is {{currentValue}}</text> 113 <text>slider end value is {{endValue}}</text> 114 <slider min="0" max="100" value="{{value}}" onchange="setvalue"></slider> 115</div> 116``` 117 118 119``` 120/* xxx.css */ 121.container { 122 width: 100%; 123 height: 100%; 124 flex-direction: column; 125 justify-content: center; 126 align-items: center; 127 background-color: #F1F3F5; 128} 129``` 130 131 132``` 133// xxx.js 134export default { 135 data: { 136 value: 0, 137 startValue: 0, 138 currentValue: 0, 139 endValue: 0, 140 }, 141 setvalue(e) { 142 if (e.mode == "start") { 143 this.value = e.value; 144 this.startValue = e.value; 145 } else if (e.mode == "move") { 146 this.value = e.value; 147 this.currentValue = e.value; 148 } else if (e.mode == "end") { 149 this.value = e.value; 150 this.endValue = e.value; 151 } 152 } 153} 154``` 155 156 157 158 159## Example Scenario 160 161Adjust the value of the slider to change the image size and dynamically print the width and height of the current image. 162 163 164``` 165<!-- xxx.hml --> 166<div class="container"> 167 <image src="common/landscape3.jpg" style=" width: {{WidthVal}}px;height:{{HeightVal}}px;margin-top: -150px;"></image> 168 <div class="txt"> 169 <slider min="0" max="100" value="{{value}}" onchange="setvalue"></slider> 170 <text>The width of this picture is {{WidthVal}}</text> 171 <text>The height of this picture is {{HeightVal}}</text> 172 </div> 173</div> 174``` 175 176 177``` 178/* xxx.css */ 179.container { 180 width: 100%; 181 height: 100%; 182 flex-direction: column; 183 justify-content: center; 184 align-items: center; 185 background-color: #F1F3F5; 186} 187.txt{ 188 flex-direction: column; 189 justify-content: center; 190 align-items: center; 191 position: fixed; 192 top: 65%; 193} 194text{ 195 margin-top: 30px; 196} 197``` 198 199 200``` 201// xxx.js 202export default{ 203 data: { 204 value: 0, 205 WidthVal: 200, 206 HeightVal: 200 207 }, 208 setvalue(e) { 209 this.WidthVal = 200 + e.value; 210 this.HeightVal = 200 + e.value 211 } 212} 213``` 214 215 216
