1# Slider 2 3The **\<Slider>** component is used to quickly adjust settings, such as the volume and brightness. 4 5> **NOTE** 6> 7> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. 8 9 10## Child Components 11 12Not supported 13 14 15## APIs 16 17Slider(options?: SliderOptions) 18 19**Widget capability**: Since API version 9, this API is supported in ArkTS widgets. 20 21**System capability**: SystemCapability.ArkUI.ArkUI.Full 22 23**Parameters** 24 25| Name | Type | Mandatory| Description | 26| ------- | --------------------------------------- | ---- | ------------------ | 27| options | [SliderOptions](#slideroptions) | No | Parameters of the slider.| 28 29## SliderOptions 30 31| Name| Type| Mandatory| Description| 32| -------- | -------- | -------- | -------- | 33| value | number | No| Current progress.<br>Default value: value of **min**<br>Since API version 10, this parameter supports [$$](../../quick-start/arkts-two-way-sync.md) for two-way binding of variables.| 34| min | number | No| Minimum value.<br>Default value: **0**| 35| max | number | No| Maximum value.<br>Default value: **100**<br>**NOTE**<br>If the value of **min** is greater than or equal to the value of **max**, the default value **0** is used for **min** and the default value **100** is used for **max**.<br>If the value is not within the [min, max] range, the value of **min** or **max** is used, whichever is closer.| 36| step | number | No| Step of the slider.<br>Default value: **1**<br>Value range: [0.01, max]<br>**NOTE**<br>If this parameter is set to a value less than 0, the default value is used.| 37| style | [SliderStyle](#sliderstyle) | No| Style of the slider thumb and track.<br>Default value: **SliderStyle.OutSet**| 38| direction<sup>8+</sup> | [Axis](ts-appendix-enums.md#axis) | No| Whether the slider moves horizontally or vertically.<br>Default value: **Axis.Horizontal**| 39| reverse<sup>8+</sup> | boolean | No| Whether the slider values are reversed. By default, the values increase from left to right for a horizontal slider and from top to bottom for a vertical slider.<br>Default value: **false**| 40 41## SliderStyle 42 43Since API version 9, this API is supported in ArkTS widgets. 44 45| Name| Description| 46| -------- | -------- | 47| OutSet | The slider is on the slider track.| 48| InSet | The slider is in the slider track.| 49 50## Attributes 51 52All the [universal attributes](ts-universal-attributes-size.md) except **responseRegion** are supported 53 54| Name| Type| Description| 55| -------- | -------- | -------- | 56| blockColor | [ResourceColor](ts-types.md#resourcecolor) | Color of the slider.<br>Since API version 9, this API is supported in ArkTS widgets.<br>**NOTE**<br>Default value: **'#ffffff'**<br>When **SliderBlockType.DEFAULT** is used, **blockColor** sets the color of the round slider.<br>When **SliderBlockType.IMAGE** is used, `blockColor` does not work as the slider has no fill color.<br>When **SliderBlockType.SHAPE** is used, **blockColor** sets the color of the slider in a custom shape.| 57| trackColor | [ResourceColor](ts-types.md#resourcecolor) | Background color of the slider.<br>Since API version 9, this API is supported in ArkTS widgets.<br>**NOTE**<br>Default value: **'#19182431'**| 58| selectedColor | [ResourceColor](ts-types.md#resourcecolor) | Color of the selected part of the slider track.<br>Since API version 9, this API is supported in ArkTS widgets.<br>**NOTE**<br>Default value: **'#007dff'**| 59| showSteps | boolean | Whether to display the current step.<br>Default value: **false**<br>Since API version 9, this API is supported in ArkTS widgets.| 60| showTips | value: boolean,<br>content<sup>10+</sup>?: [ResourceStr](ts-types.md#resourcestr) | **value**: whether to display a tooltip when the user drags the slider.<br>Default value: **false**<br>**content**: text content of the tooltip. The default value is the current percentage.<br>Since API version 9, this API is supported in ArkTS widgets.<br>**NOTE**<br>When **direction** is set to **Axis.Horizontal**, the tooltip is displayed right above the slider. When **direction** is set to **Axis.Vertical**, the tooltip is displayed on the left of the slider.<br>The drawing area of the tooltip is the overlay of the slider.<br>If no margin is set for the slider or the margin is not large enough, the tooltip will be clipped.| 61| trackThickness<sup>8+</sup> | [Length](ts-types.md#length) | Track thickness of the slider.<br>Default value: **4.0vp** when **style** is set to **[SliderStyle](#sliderstyle).OutSet**; **20.0vp** when **style** is set to **[SliderStyle](#sliderstyle).InSet**<br>Since API version 9, this API is supported in ArkTS widgets.<br>**NOTE**<br>If the value is less than or equal to 0, the default value is used.| 62| blockBorderColor<sup>10+</sup> | [ResourceColor](ts-types.md#resourcecolor) | Border color of the slider in the block direction.<br>**NOTE**<br>Default value: **'#00000000'**<br>When **SliderBlockType.DEFAULT** is used, **blockBorderColor** sets the border color of the round slider.<br>When **SliderBlockType.IMAGE** is used, **blockBorderColor** does not work as the slider has no border.<br>When **SliderBlockType.SHAPE** is used, **blockBorderColor** sets the border color of the slider in a custom shape.| 63| blockBorderWidth<sup>10+</sup> | [Length](ts-types.md#length) | Border width of the slider in the block direction.<br>**NOTE**<br>When **SliderBlockType.DEFAULT** is used, **blockBorderWidth** sets the border width of the round slider.<br>When **SliderBlockType.IMAGE** is used, **blockBorderWidth** does not work as the slider has no border.<br>WWhen **SliderBlockType.SHAPE** is used, **blockBorderWidth** sets the border width of the slider in a custom shape.| 64| stepColor<sup>10+</sup> | [ResourceColor](ts-types.md#resourcecolor) | Step color.<br>**NOTE**<br>Default value: **'#19182431'**| 65| trackBorderRadius<sup>10+</sup> | [Length](ts-types.md#length) | Radius of the rounded corner of the slider track.<br>**NOTE**<br>Default value: **'2vp'**| 66| blockSize<sup>10+</sup> | [SizeOptions](ts-types.md#sizeoptions) | Size of the slider in the block direction.<br>**NOTE**<br>Default value:<br>**{width: 16, height: 16}** when **style** is set to [SliderStyle](#sliderstyle).OutSet<br>{width: 16, height: 16} when **style** is set to [SliderStyle](#sliderstyle).InSet<br>If the width and height of **bolckSize** are different, the smaller value is used. If one or both of the width and height are less than or equal to 0, the default value is used.| 67| blockStyle<sup>10+</sup> | [SliderBlockStyle](#sliderblockstyle10) | Style of the slider in the block direction.<br>**NOTE**<br>Default value: **SliderBlockType.DEFAULT**, indicating the round slider.| 68| stepSize<sup>10+</sup> | [Length](ts-types.md#length) | Step size (diameter).<br>**NOTE**<br>Default value: **'4vp'**<br>If the value is 0, the step size is not displayed. If the value is less than 0, the default value is used.| 69| minLabel<sup>deprecated</sup> | string | Minimum value.<br>This API is deprecated since API version 9. You are advised to use **min** instead.| 70| maxLabel<sup>deprecated</sup> | string | Maximum value.<br>This API is deprecated since API version 9. You are advised to use **max** instead.| 71 72> **NOTE** 73> 74> - By default, the slider has no padding. 75> - For a horizontal slider, the default height is 40 vp, the width equals that of the parent container, the slider track is displayed in the center, and the left and right margins are 10 vp and not covered by the paddings (if set). 76> - For a vertical slider, the default width is 40 vp, the height equals that of the parent container, the slider track is displayed in the center, and the top and bottom margins are 6 vp and not covered by the paddings (if set). 77 78## SliderBlockStyle<sup>10+</sup> 79 80Describes the style of the slider in the block direction. 81 82| Name | Type | Mandatory| Description | 83| ----- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 84| type | [SliderBlockType](#sliderblocktype10) | Yes | Type of the slider in the block direction.<br>Default value: **SliderBlockType.DEFAULT**, indicating the round slider.| 85| image | [ResourceStr](ts-types.md#resourcestr) | No | Image resource of the slider.<br>The area size for displaying the image is subject to the **blockSize** attribute. Be mindful of the image size when selecting an image.| 86| shape | [Circle](ts-drawing-components-circle.md) \| [Ellipse](ts-drawing-components-ellipse.md) \| [Path](ts-drawing-components-path.md) \| [Rect](ts-drawing-components-rect.md) | No | Custom shape of the slider. | 87 88## SliderBlockType<sup>10+</sup> 89 90Enumerates the types of the slider in the block direction. 91 92| Name | Description | 93| ------- | ---------------------- | 94| DEFAULT | Round slider. | 95| IMAGE | Slider with an image background. | 96| SHAPE | Slider in a custom shape.| 97 98## Events 99 100In addition to the [universal events](ts-universal-events-click.md), the following attributes are supported. 101 102| Name| Description| 103| -------- | -------- | 104| onChange(callback: (value: number, mode: SliderChangeMode) => void) | Invoked when the slider is dragged or clicked.<br>**value**: current slider value. If the return value contains decimals, you can use the **number.toFixed()** API to process the data to the expected precision.<br>**mode**: state triggered by the event.<br>Since API version 9, this API is supported in ArkTS widgets.<br>**NOTE**<br>The **Begin** and **End** states are triggered when the slider is clicked with a gesture. The **Moving** and **Click** states are triggered when the value of **value** changes.<br>If the coherent action is a drag action, the **Click** state will not be triggered.<br>The value range of **value** is the **steps** value array.| 105 106## SliderChangeMode 107 108Since API version 9, this API is supported in ArkTS widgets. 109 110| Name| Value| Description| 111| -------- | -------- | -------- | 112| Begin | 0 | The user touches or presses the slider with a gesture or mouse.| 113| Moving | 1 | The user is dragging the slider.| 114| End | 2 | The user stops dragging the slider by lifting their finger or releasing the mouse.| 115| Click | 3 | The user moves the slider by touching the slider track.| 116 117## Example 118 119### Example 1 120 121```ts 122// xxx.ets 123@Entry 124@Component 125struct SliderExample { 126 @State outSetValueOne: number = 40 127 @State inSetValueOne: number = 40 128 @State outSetValueTwo: number = 40 129 @State inSetValueTwo: number = 40 130 @State vOutSetValueOne: number = 40 131 @State vInSetValueOne: number = 40 132 @State vOutSetValueTwo: number = 40 133 @State vInSetValueTwo: number = 40 134 135 build() { 136 Column({ space: 8 }) { 137 Text('outset slider').fontSize(9).fontColor(0xCCCCCC).width('90%').margin(15) 138 Row() { 139 Slider({ 140 value: this.outSetValueOne, 141 min: 0, 142 max: 100, 143 style: SliderStyle.OutSet 144 }) 145 .showTips(true) 146 .onChange((value: number, mode: SliderChangeMode) => { 147 this.outSetValueOne = value 148 console.info('value:' + value + 'mode:' + mode.toString()) 149 }) 150 // toFixed(0) converts the return value of the slider to an integer. 151 Text(this.outSetValueOne.toFixed(0)).fontSize(12) 152 } 153 .width('80%') 154 Row() { 155 Slider({ 156 value: this.outSetValueTwo, 157 step: 10, 158 style: SliderStyle.OutSet 159 }) 160 .showSteps(true) 161 .onChange((value: number, mode: SliderChangeMode) => { 162 this.outSetValueTwo = value 163 console.info('value:' + value + 'mode:' + mode.toString()) 164 }) 165 Text(this.outSetValueTwo.toFixed(0)).fontSize(12) 166 } 167 .width('80%') 168 169 Text('inset slider').fontSize(9).fontColor(0xCCCCCC).width('90%').margin(15) 170 Row() { 171 Slider({ 172 value: this.inSetValueOne, 173 min: 0, 174 max: 100, 175 style: SliderStyle.InSet 176 }) 177 .blockColor('#191970') 178 .trackColor('#ADD8E6') 179 .selectedColor('#4169E1') 180 .showTips(true) 181 .onChange((value: number, mode: SliderChangeMode) => { 182 this.inSetValueOne = value 183 console.info('value:' + value + 'mode:' + mode.toString()) 184 }) 185 Text(this.inSetValueOne.toFixed(0)).fontSize(12) 186 } 187 .width('80%') 188 Row() { 189 Slider({ 190 value: this.inSetValueTwo, 191 step: 10, 192 style: SliderStyle.InSet 193 }) 194 .blockColor('#191970') 195 .trackColor('#ADD8E6') 196 .selectedColor('#4169E1') 197 .showSteps(true) 198 .onChange((value: number, mode: SliderChangeMode) => { 199 this.inSetValueTwo = value 200 console.info('value:' + value + 'mode:' + mode.toString()) 201 }) 202 Text(this.inSetValueTwo.toFixed(0)).fontSize(12) 203 } 204 .width('80%') 205 206 Row() { 207 Column() { 208 Text('vertical outset slider').fontSize(9).fontColor(0xCCCCCC).width('50%').margin(15) 209 Row() { 210 Text().width('10%') 211 Slider({ 212 value: this.vOutSetValueOne, 213 style: SliderStyle.OutSet, 214 direction: Axis.Vertical 215 }) 216 .blockColor('#191970') 217 .trackColor('#ADD8E6') 218 .selectedColor('#4169E1') 219 .showTips(true) 220 .onChange((value: number, mode: SliderChangeMode) => { 221 this.vOutSetValueOne = value 222 console.info('value:' + value + 'mode:' + mode.toString()) 223 }) 224 Slider({ 225 value: this.vOutSetValueTwo, 226 step: 10, 227 style: SliderStyle.OutSet, 228 direction: Axis.Vertical 229 }) 230 .blockColor('#191970') 231 .trackColor('#ADD8E6') 232 .selectedColor('#4169E1') 233 .showSteps(true) 234 .onChange((value: number, mode: SliderChangeMode) => { 235 this.vOutSetValueTwo = value 236 console.info('value:' + value + 'mode:' + mode.toString()) 237 }) 238 } 239 }.width('50%').height(300) 240 241 Column() { 242 Text('vertical inset slider').fontSize(9).fontColor(0xCCCCCC).width('50%').margin(15) 243 Row() { 244 Slider({ 245 value: this.vInSetValueOne, 246 style: SliderStyle.InSet, 247 direction: Axis.Vertical, 248 reverse: true // By default, at the top of the vertical slider is the min value and at the bottom is the max value. Therefore, if you want to slide from bottom to top, set reverse to true. 249 }) 250 .showTips(true) 251 .onChange((value: number, mode: SliderChangeMode) => { 252 this.vInSetValueOne = value 253 console.info('value:' + value + 'mode:' + mode.toString()) 254 }) 255 Slider({ 256 value: this.vInSetValueTwo, 257 step: 10, 258 style: SliderStyle.InSet, 259 direction: Axis.Vertical, 260 reverse: true 261 }) 262 .showSteps(true) 263 .onChange((value: number, mode: SliderChangeMode) => { 264 this.vInSetValueTwo = value 265 console.info('value:' + value + 'mode:' + mode.toString()) 266 }) 267 } 268 }.width('50%').height(300) 269 } 270 }.width('100%') 271 } 272} 273``` 274 275 276 277### Example 2 278 279```ts 280@Entry 281@Component 282struct SliderExample { 283 @State tipsValue: number = 40 284 285 build() { 286 Column({ space: 8 }) { 287 Text('block').fontSize(9).fontColor(0xCCCCCC).margin(15).width('90%') 288 Slider({ style: SliderStyle.OutSet, value: 40 }) 289 .blockSize({ width: 40, height: 40 }) 290 .blockBorderColor(Color.Red) 291 .blockBorderWidth(5) 292 Divider() 293 Text('step').fontSize(9).fontColor(0xCCCCCC).margin(15).width('90%') 294 Slider({ style: SliderStyle.InSet, value: 40, step: 10 }) 295 .showSteps(true) 296 .stepSize(8) 297 .stepColor(Color.Yellow) 298 Divider() 299 Text('track').fontSize(9).fontColor(0xCCCCCC).margin(15).width('90%') 300 Slider({ style: SliderStyle.InSet, value: 40 }) 301 .trackBorderRadius(2) 302 Divider() 303 Text('blockStyle').fontSize(9).fontColor(0xCCCCCC).margin(15).width('90%') 304 Slider({ style: SliderStyle.OutSet, value: 40 }) 305 .blockStyle({ type: SliderBlockType.DEFAULT }) 306 Slider({ style: SliderStyle.OutSet, value: 40 }) 307 .blockStyle({ type: SliderBlockType.IMAGE, image: $r('sys.media.ohos_app_icon') }) 308 Slider({ style: SliderStyle.OutSet, value: 40 }) 309 .blockSize({ width: '60px', height: '60px' }) 310 .blockColor(Color.Red) 311 .blockStyle({ type: SliderBlockType.SHAPE, shape: new Path({ commands: 'M60 60 M30 30 L15 56 L45 56 Z' }) }) 312 Divider() 313 Text('tips').fontSize(9).fontColor(0xCCCCCC).margin(15).width('90%') 314 Slider({ style: SliderStyle.InSet, value: this.tipsValue }) 315 .showTips(true, this.tipsValue.toFixed()) 316 .onChange(value => { 317 this.tipsValue = value 318 }) 319 } 320 } 321} 322``` 323 324 325
