• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
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```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![en-us_image_0000001232162312](figures/en-us_image_0000001232162312.gif)
34
35
36## Setting Styles and Attributes
37
38Use the **&lt;slider&gt;** component to set the background color, selected color, and slider color using the **color**, **selected-color**, and **block-color** attributes, respectively.
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![en-us_image_0000001232003000](figures/en-us_image_0000001232003000.gif)
67
68Add the **mix**, **max**, **value**, **step**, and **mode** attributes to set the minimum value, maximum value, initial value, step, and style of the slider.
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![en-us_image_0000001276003517](figures/en-us_image_0000001276003517.gif)
92
93> **NOTE**
94>
95> Set the **mode** attribute to specify the slider style. It can be set to:
96>
97> - **outset**: The slider is on the sliding bar.
98>
99> - **inset**: The slider is inside the sliding bar.
100
101
102## Binding Events
103
104Add the **change** event to the **&lt;rating&gt;** component and pass the ChangeEvent attribute when adding the event.
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![en-us_image_0000001275803169](figures/en-us_image_0000001275803169.gif)
156
157
158## Example Scenario
159
160Adjust the value of the slider to change the image size and dynamically print the width and height of the current image.
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![en-us_image_0000001275922997](figures/en-us_image_0000001275922997.gif)
215