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**: This API can be used in ArkTS widgets since API version 9. 20 21**Atomic service API**: This API can be used in atomic services since API version 11. 22 23**System capability**: SystemCapability.ArkUI.ArkUI.Full 24 25**Parameters** 26 27| Name | Type | Mandatory| Description | 28| ------- | --------------------------------------- | ---- | ------------------ | 29| options | [SliderOptions](#slideroptions) | No | Parameters of the slider.| 30 31## SliderOptions 32 33**Widget capability**: This API can be used in ArkTS widgets since API version 9. 34 35**Atomic service API**: This API can be used in atomic services since API version 11. 36 37**System capability**: SystemCapability.ArkUI.ArkUI.Full 38 39| Name| Type| Mandatory| Description| 40| -------- | -------- | -------- | -------- | 41| value | number | No| Current progress.<br>Default value: same as the value of **min**<br>Since API version 10, this parameter supports two-way binding through [$$](../../../quick-start/arkts-two-way-sync.md).<br>This parameter supports two-way binding through [!!](../../../quick-start/arkts-new-binding.md).<br>Value range: [min, max]<br>Values less than the value of **min** are adjusted to the value of **min**, and values greater than the value of **max** are capped at the value of **max**.| 42| min | number | No| Minimum value.<br>Default value: **0**| 43| 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 **min** value defaults to **0**, and the **max** value defaults to **100**.<br>If the value is not within the [min, max] range, the value of **min** or **max** is used, whichever is closer.| 44| step | number | No| Step of the slider.<br>Default value: **1**<br>Value range: [0.01, max - min]<br>**NOTE**<br>If this parameter is set to a value less than 0 or greater than the value of **max**, the default value is used.| 45| style | [SliderStyle](#sliderstyle) | No| Style of the slider thumb and track.<br>Default value: **SliderStyle.OutSet**| 46| direction<sup>8+</sup> | [Axis](ts-appendix-enums.md#axis) | No| Whether the slider moves horizontally or vertically.<br>Default value: **Axis.Horizontal**| 47| reverse<sup>8+</sup> | boolean | No| Whether the slider values are reversed.<br>Default value: **false**<br>**true**: Horizontal sliders slide from right to left, while vertical sliders slide from bottom to top. **false**: Horizontal sliders slide from left to right, while vertical sliders slide from top to bottom.| 48 49## SliderStyle 50 51**System capability**: SystemCapability.ArkUI.ArkUI.Full 52 53| Name| Description| 54| -------- | -------- | 55| OutSet | The thumb is on the track.<br>**Widget capability**: This API can be used in ArkTS widgets since API version 9.<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 56| InSet | The thumb is in the track.<br>**Widget capability**: This API can be used in ArkTS widgets since API version 9.<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 57| NONE<sup>12+</sup> | There is no thumb.<br>**Widget capability**: This API can be used in ArkTS widgets since API version 12.<br>**Atomic service API**: This API can be used in atomic services since API version 12.| 58 59## Attributes 60 61All the [universal attributes](ts-component-general-attributes.md) except **responseRegion** are supported. 62 63### blockColor 64 65blockColor(value: ResourceColor) 66 67Sets the color of the thumb. 68 69When **SliderBlockType.DEFAULT** is used, **blockColor** sets the color of the round thumb. 70 71When **SliderBlockType.IMAGE** is used, **blockColor** does not work as the thumb has no fill color. 72 73When **SliderBlockType.SHAPE** is used, **blockColor** sets the color of the thumb in a custom shape. 74 75**Widget capability**: This API can be used in ArkTS widgets since API version 9. 76 77**Atomic service API**: This API can be used in atomic services since API version 11. 78 79**System capability**: SystemCapability.ArkUI.ArkUI.Full 80 81**Parameters** 82 83| Name| Type | Mandatory| Description | 84| ------ | ------------------------------------------ | ---- | ----------------------------------- | 85| value | [ResourceColor](ts-types.md#resourcecolor) | Yes | Color of the thumb.<br>Default value: **$r('sys.color.ohos_id_color_foreground_contrary')**| 86 87### trackColor 88 89trackColor(value: ResourceColor | LinearGradient) 90 91Sets the background color of the track. 92 93Since API version 12, **LinearGradient** can be used to create a gradient effect for the track. 94 95**Widget capability**: This API can be used in ArkTS widgets since API version 9. 96 97**Atomic service API**: This API can be used in atomic services since API version 11. 98 99**System capability**: SystemCapability.ArkUI.ArkUI.Full 100 101**Parameters** 102 103| Name| Type | Mandatory| Description | 104| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 105| value | [ResourceColor](ts-types.md#resourcecolor) \| [LinearGradient<sup>12+</sup>](ts-basic-components-datapanel.md#lineargradient10) | Yes | Background color of the track.<br>**NOTE**<br>With gradient color settings, if the color stop values are invalid or if the color stops are empty, the gradient effect will not be applied.<br>Default value: **$r('sys.color.ohos_id_color_component_normal')**<br>The LinearGradient type cannot be used in atomic services.| 106 107### selectedColor 108 109selectedColor(value: ResourceColor) 110 111Sets the color of the portion of the track between the minimum value and the thumb, representing the selected portion. 112 113**Widget capability**: This API can be used in ArkTS widgets since API version 9. 114 115**Atomic service API**: This API can be used in atomic services since API version 11. 116 117**System capability**: SystemCapability.ArkUI.ArkUI.Full 118 119**Parameters** 120 121| Name| Type | Mandatory| Description | 122| ------ | ------------------------------------------ | ---- | ------------------------------------------------------------ | 123| value | [ResourceColor](ts-types.md#resourcecolor) | Yes | Color of the portion of the track between the minimum value and the thumb.<br>**NOTE**<br>With gradient color settings, if the color stop values are invalid or if the color stops are empty, the gradient effect will not be applied.<br>Default value: **$r('sys.color.ohos_id_color_emphasize')**| 124 125### selectedColor<sup>18+</sup> 126 127selectedColor(selectedColor: ResourceColor | LinearGradient) 128 129Sets the color of the portion of the track between the minimum value and the thumb, representing the selected portion. Compared to [selectedColor](#selectedcolor), this API supports the **LinearGradient** type. 130 131Since API version 16, **LinearGradient** can be used to create a gradient effect for the selected portion. 132 133**Widget capability**: This API can be used in ArkTS widgets since API version 18. 134 135**Atomic service API**: This API can be used in atomic services since API version 18. 136 137**System capability**: SystemCapability.ArkUI.ArkUI.Full 138 139**Parameters** 140 141| Name | Type | Mandatory| Description | 142| ------------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 143| selectedColor | [ResourceColor](ts-types.md#resourcecolor) \| [LinearGradient<sup>18+</sup>](ts-basic-components-datapanel.md#lineargradient10) | Yes | Color of the portion of the track between the minimum value and the thumb.<br>**NOTE**<br>With gradient color settings, if the color stop values are invalid or if the color stops are empty, the gradient effect will not be applied.<br>Default value: **$r('sys.color.ohos_id_color_emphasize')**| 144 145### showSteps 146 147showSteps(value: boolean) 148 149Sets whether to display the current step. 150 151**Widget capability**: This API can be used in ArkTS widgets since API version 9. 152 153**Atomic service API**: This API can be used in atomic services since API version 11. 154 155**System capability**: SystemCapability.ArkUI.ArkUI.Full 156 157**Parameters** 158 159| Name| Type | Mandatory| Description | 160| ------ | ------- | ---- | ------------------------------------------ | 161| value | boolean | Yes | Whether to display the current step. <br>**true**: Display the current step.<br>**false**: Do not display the current step.<br>Default value: **false**| 162 163### showTips 164 165showTips(value: boolean, content?: ResourceStr) 166 167Sets whether to display a tooltip when the user drags the slider. 168 169When **direction** is set to **Axis.Horizontal**, the tooltip is displayed right above the slider; if there is insufficient space above, it will be displayed below. When **direction** is set to **Axis.Vertical**, the tooltip is displayed on the left of the slider; if there is insufficient space on the left, it will be displayed on the right. If the margins are not set or are set to small values, the tooltip may be clipped. 170 171The drawing area of the tooltip is the overlay of the slider. 172 173**Widget capability**: This API can be used in ArkTS widgets since API version 9. 174 175**Atomic service API**: This API can be used in atomic services since API version 11. 176 177**System capability**: SystemCapability.ArkUI.ArkUI.Full 178 179**Parameters** 180 181| Name | Type | Mandatory| Description | 182| --------------------- | -------------------------------------- | ---- | ------------------------------------------ | 183| value | boolean | Yes | Whether to display a tooltip when the user drags the slider.<br>Default value: **false**| 184| content<sup>10+</sup> | [ResourceStr](ts-types.md#resourcestr) | No | Content of the tooltip. By default, the tooltip shows the current percentage value. | 185 186### trackThickness<sup>8+</sup> 187 188trackThickness(value: Length) 189 190Sets the thickness of the track. If the value is less than or equal to 0, the default value is used. 191 192To ensure [SliderStyle](#sliderstyle) works as expected for the thumb and track, [blockSize](#blocksize10) should increase or decrease proportionally with **trackThickness**. 193 194Specially, when **style** is **[SliderStyle](#sliderstyle).OutSet**, trackThickness: [blockSize](#blocksize10) = 1:4; when **style** is **[SliderStyle](#sliderstyle).InSet**, trackThickness: [blockSize](#blocksize10) = 5:3. 195 196In changing the value of **trackThickness**, if it or the value of [blockSize](#blocksize10) exceeds the width or height of the slider, the default value is used. (When **style** is **[SliderStyle](#sliderstyle).OutSet**, it is possible that only the value of [blockSize](#blocksize10) exceeds the height of the slider.) 197 198**Widget capability**: This API can be used in ArkTS widgets since API version 9. 199 200**Atomic service API**: This API can be used in atomic services since API version 11. 201 202**System capability**: SystemCapability.ArkUI.ArkUI.Full 203 204**Parameters** 205 206| Name| Type | Mandatory| Description | 207| ------ | ---------------------------- | ---- | ------------------------------------------------------------ | 208| value | [Length](ts-types.md#length) | Yes | Thickness of the track.<br>Default value: 4.0vp when **style** is set to **[SliderStyle](#sliderstyle).OutSet**; 20.0vp when **style** is set to **[SliderStyle](#sliderstyle).InSet**| 209 210### blockBorderColor<sup>10+</sup> 211 212blockBorderColor(value: ResourceColor) 213 214Sets the border color of the slider in the block direction. 215 216When **SliderBlockType.DEFAULT** is used, **blockBorderColor** sets the border color of the round slider. 217 218When **SliderBlockType.IMAGE** is used, **blockBorderColor** does not work as the slider has no border. 219 220When **SliderBlockType.SHAPE** is used, **blockBorderColor** sets the border color of the slider in a custom shape. 221 222**Atomic service API**: This API can be used in atomic services since API version 11. 223 224**System capability**: SystemCapability.ArkUI.ArkUI.Full 225 226**Parameters** 227 228| Name| Type | Mandatory| Description | 229| ------ | ------------------------------------------ | ---- | -------------------------------------- | 230| value | [ResourceColor](ts-types.md#resourcecolor) | Yes | Border color of the slider in the block direction.<br>Default value: **'#00000000'**| 231 232### blockBorderWidth<sup>10+</sup> 233 234blockBorderWidth(value: Length) 235 236Sets the border width of the slider in the block direction. 237 238When **SliderBlockType.DEFAULT** is used, **blockBorderWidth** sets the border width of the round slider. 239 240When **SliderBlockType.IMAGE** is used, **blockBorderWidth** does not work as the slider has no border. 241 242When **SliderBlockType.SHAPE** is used, **blockBorderWidth** sets the border width of the slider in a custom shape. 243 244**Atomic service API**: This API can be used in atomic services since API version 11. 245 246**System capability**: SystemCapability.ArkUI.ArkUI.Full 247 248**Parameters** 249 250| Name| Type | Mandatory| Description | 251| ------ | ---------------------------- | ---- | -------------- | 252| value | [Length](ts-types.md#length) | Yes | Border width of the slider in the block direction.<br>**NOTE**<br>For the string type, percentage values are not supported.| 253 254### stepColor<sup>10+</sup> 255 256stepColor(value: ResourceColor) 257 258Sets the step color. 259 260**Atomic service API**: This API can be used in atomic services since API version 11. 261 262**System capability**: SystemCapability.ArkUI.ArkUI.Full 263 264**Parameters** 265 266| Name| Type | Mandatory| Description | 267| ------ | ------------------------------------------ | ---- | ---------------------------------- | 268| value | [ResourceColor](ts-types.md#resourcecolor) | Yes | Step color.<br>Default value:<br>**$r('sys.color.ohos_id_color_foreground')** mixed with<br>**$r('sys.color.ohos_id_alpha_normal_bg')** transparency| 269 270### trackBorderRadius<sup>10+</sup> 271 272trackBorderRadius(value: Length) 273 274Sets the radius of the rounded corner of the track. 275 276**Atomic service API**: This API can be used in atomic services since API version 11. 277 278**System capability**: SystemCapability.ArkUI.ArkUI.Full 279 280**Parameters** 281 282| Name| Type | Mandatory| Description | 283| ------ | ---------------------------- | ---- | -------------------------------- | 284| value | [Length](ts-types.md#length) | Yes | Radius of the rounded corner of the track.<br>Default value:<br>**'2vp'** when **style** is **SliderStyle.OutSet**<br>**'10vp'** when **style** is **SliderStyle.InSet**<br>**NOTE**<br>For the string type, percentage values are not supported. If the value is less than 0, the default value is used.| 285 286### selectedBorderRadius<sup>12+</sup> 287 288selectedBorderRadius(value: Dimension) 289 290Set the corner radius of the selected (highlighted) part of the slider. 291 292**Atomic service API**: This API can be used in atomic services since API version 12. 293 294**System capability**: SystemCapability.ArkUI.ArkUI.Full 295 296**Parameters** 297 298| Name| Type | Mandatory| Description | 299| ------ | ---------------------------- | ---- | -------------------------------- | 300| value | [Dimension](ts-types.md#dimension10)| Yes | Corner radius of the selected part of the slider.<br>Default value:<br>- For **SliderStyle.InSet** or **SliderStyle.OutSet**: same as the corner radius of the background<br>- **SliderStyle.NONE**: **0**<br>**NOTE**<br>Percentage values are not supported. If the value is less than 0, the default value is used.| 301 302### blockSize<sup>10+</sup> 303 304blockSize(value: SizeOptions) 305 306Sets the size of the slider in the block direction. 307 308When the slider type is set to **SliderBlockType.DEFAULT**, the smaller of the width and height values is used as the radius of the circle. 309 310When the slider type is set to **SliderBlockType.IMAGE**, this API sets the size of the image, which is scaled using the **ObjectFit.Cover** strategy. 311 312When the slider type is set to **SliderBlockType.SHAPE**, this API sets the size of the custom shape, which is also scaled using the **ObjectFit.Cover** strategy. 313 314**Atomic service API**: This API can be used in atomic services since API version 11. 315 316**System capability**: SystemCapability.ArkUI.ArkUI.Full 317 318**Parameters** 319 320| Name| Type | Mandatory| Description | 321| ------ | -------------------------------------- | ---- | ------------------------------------------------------------ | 322| value | [SizeOptions](ts-types.md#sizeoptions) | Yes | Size of the slider in the block direction.<br>Default value:<br>For [SliderStyle](#sliderstyle).OutSet: **{width: 18, height: 18}**<br/>- For [SliderStyle](#sliderstyle).InSet: **{width: 12, height: 12}**<br/>- For [SliderStyle](#sliderstyle).NONE: This parameter is not effective.<br>If the set **blockSize** has different width and height values, the smaller value is taken. If one or both of the width and height values are less than or equal to 0, the default value is used instead.| 323 324### blockStyle<sup>10+</sup> 325 326blockStyle(value: SliderBlockStyle) 327 328Sets the style of the slider in the block direction. 329 330**Atomic service API**: This API can be used in atomic services since API version 11. 331 332**System capability**: SystemCapability.ArkUI.ArkUI.Full 333 334**Parameters** 335 336| Name| Type | Mandatory| Description | 337| ------ | ----------------------------------------------- | ---- | ------------------------------------------------------------ | 338| value | [SliderBlockStyle](#sliderblockstyle10) | Yes | Style of the slider in the block direction.<br>Default value: **SliderBlockType.DEFAULT**, indicating the round slider.| 339 340### stepSize<sup>10+</sup> 341 342stepSize(value: Length) 343 344Sets the step size (diameter). If the value is 0, the step size is not displayed. If the value is less than 0, the default value is used. 345 346**Atomic service API**: This API can be used in atomic services since API version 11. 347 348**System capability**: SystemCapability.ArkUI.ArkUI.Full 349 350**Parameters** 351 352| Name| Type | Mandatory| Description | 353| ------ | ---------------------------- | ---- | ------------------------------------- | 354| value | [Length](ts-types.md#length) | Yes | Step size (diameter).<br>Default value: **'4vp'**<br>Value range: [0, [trackThickness](#trackthickness8))| 355 356### minLabel<sup>(deprecated)</sup> 357 358minLabel(value: string) 359 360Sets the minimum value. 361 362This API is deprecated since API version 9. You are advised to use **min** instead. 363 364**System capability**: SystemCapability.ArkUI.ArkUI.Full 365 366**Parameters** 367 368| Name| Type | Mandatory| Description | 369| ------ | ------ | ---- | -------- | 370| value | string | Yes | Minimum value.| 371 372### maxLabel<sup>(deprecated)</sup> 373 374maxLabel(value: string) 375 376Sets the maximum value. 377 378This API is deprecated since API version 9. You are advised to use **max** instead. 379 380**System capability**: SystemCapability.ArkUI.ArkUI.Full 381 382**Parameters** 383 384| Name| Type | Mandatory| Description | 385| ------ | ------ | ---- | -------- | 386| value | string | Yes | Maximum value.| 387 388> **NOTE** 389> 390> - By default, the slider has no padding. 391> - A horizontal slider is displayed in the center with the following default settings: 40 vp height, width equal with that of the parent container, 10 vp left and right margins not covered by any padding (if set). 392> - A vertical slider is displayed in the center with the following default settings: 40 vp width, height equal with that of the parent container, 6 vp top and bottom margins not covered by any padding (if set). 393 394### sliderInteractionMode<sup>12+</sup> 395 396sliderInteractionMode(value: SliderInteraction) 397 398Sets the interaction mode between the user and the slider. 399 400**Atomic service API**: This API can be used in atomic services since API version 12. 401 402**System capability**: SystemCapability.ArkUI.ArkUI.Full 403 404**Parameters** 405 406| Name| Type | Mandatory| Description | 407| ------ | ------------------------------------------------- | ---- | ------------------------------------------------------------ | 408| value | [SliderInteraction](#sliderinteraction12)| Yes | Interaction mode between the user and the slider.<br> Default value: **SliderInteraction.SLIDE_AND_CLICK**| 409 410### minResponsiveDistance<sup>12+</sup> 411 412minResponsiveDistance(value: number) 413 414Sets the minimum distance required for the slider to respond. 415 416**Atomic service API**: This API can be used in atomic services since API version 12. 417 418**System capability**: SystemCapability.ArkUI.ArkUI.Full 419 420**Parameters** 421 422| Name| Type | Mandatory| Description | 423| ------ | ------- | ---- | ------------------------------------------ | 424| value | number | Yes | Minimum distance required for the slider to respond. The slider will only respond and move when the sliding distance exceeds this threshold.<br>**NOTE**<br>The unit is the same as that of [min](#slideroptions) and [max](#slideroptions).<br>If the value is less than 0, greater than the result of (max - min), or invalid, the default value is used.<br>Default value: **0** | 425 426### contentModifier<sup>12+</sup> 427 428contentModifier(modifier: ContentModifier\<SliderConfiguration>) 429 430Creates a content modifier. 431 432**Atomic service API**: This API can be used in atomic services since API version 12. 433 434**System capability**: SystemCapability.ArkUI.ArkUI.Full 435 436**Parameters** 437 438| Name| Type | Mandatory| Description | 439| ------ | --------------------------------------------- | ---- | ------------------------------------------------ | 440| modifier | [ContentModifier\<SliderConfiguration>](#sliderconfiguration12)| Yes | Content modifier to apply to the slider.<br>**modifier**: content modifier. You need a custom class to implement the **ContentModifier** API.| 441 442> **NOTE** 443> 444> - If **contentModifier** is set, then clicks and swipes within the custom area will not trigger the **onChange** event of the original slider. 445> - The **onChange** event of the original slider can only be triggered when the **triggerChange** function is called with the correct parameter value. 446 447### slideRange<sup>12+</sup> 448 449slideRange(value: SlideRange) 450 451Sets the slide range. 452 453**Atomic service API**: This API can be used in atomic services since API version 12. 454 455**System capability**: SystemCapability.ArkUI.ArkUI.Full 456 457**Parameters** 458 459| Name| Type | Mandatory| Description | 460| ------ | ----------------------------------- | ---- | ---------------- | 461| value | [SlideRange](#sliderange12) | Yes | Slide range.| 462 463### enableHapticFeedback<sup>18+</sup> 464 465enableHapticFeedback(enabled: boolean) 466 467Specifies whether to enable haptic feedback. 468 469To enable haptic feedback, you must declare the ohos.permission.VIBRATE permission under **requestPermissions** in the **module.json5** file of the project. 470 471```json 472"requestPermissions": [ 473 { 474 "name": "ohos.permission.VIBRATE", 475 } 476 ] 477``` 478 479**Atomic service API**: This API can be used in atomic services since API version 18. 480 481**System capability**: SystemCapability.ArkUI.ArkUI.Full 482 483| Name| Type | Mandatory | Description | 484| ------ | --------------------------------------------- |-----|-------------------------------------------------------------------------------------| 485| enabled | boolean | Yes | Whether to enable haptic feedback.<br>**true** (default): Haptic feedback is enabled.<br>**false**: Haptic feedback is disabled.| 486 487### digitalCrownSensitivity<sup>18+</sup> 488 489digitalCrownSensitivity(sensitivity: Optional\<CrownSensitivity>) 490 491Sets the sensitivity to the digital crown rotation. 492 493**Atomic service API**: This API can be used in atomic services since API version 18. 494 495**System capability**: SystemCapability.ArkUI.ArkUI.Full 496 497**Parameters** 498 499| Name | Type | Mandatory| Description | 500| ----------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------- | 501| sensitivity | [Optional\<CrownSensitivity>](ts-appendix-enums.md#crownsensitivity18) | Yes | Sensitivity to the digital crown rotation.<br>Default value: **CrownSensitivity.MEDIUM**| 502 503## SliderBlockStyle<sup>10+</sup> 504 505Describes the style of the slider in the block direction. 506 507**Atomic service API**: This API can be used in atomic services since API version 11. 508 509**System capability**: SystemCapability.ArkUI.ArkUI.Full 510 511| Name | Type | Mandatory| Description | 512| ----- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 513| type | [SliderBlockType](#sliderblocktype10) | Yes | Type of the slider in the block direction.<br>Default value: **SliderBlockType.DEFAULT**, indicating the round slider.| 514| 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.| 515| 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. | 516 517## SliderBlockType<sup>10+</sup> 518 519Enumerates the types of the slider in the block direction. 520 521**Atomic service API**: This API can be used in atomic services since API version 11. 522 523**System capability**: SystemCapability.ArkUI.ArkUI.Full 524 525| Name | Value| Description | 526| ------- | -- | ---------------------- | 527| DEFAULT | 0 | Round slider. | 528| IMAGE | 1 | Slider with an image background. | 529| SHAPE | 2 | Slider in a custom shape.| 530 531## SliderInteraction<sup>12+</sup> 532 533Enumerates the interaction modes between the user and the slider. 534 535**Atomic service API**: This API can be used in atomic services since API version 12. 536 537**System capability**: SystemCapability.ArkUI.ArkUI.Full 538 539| Name | Value|Description | 540| ------ | -- | ----------------------------- | 541| SLIDE_AND_CLICK | 0 | Users can drag the slider or touch the track to move the slider. The slider moves as soon as the mouse or finger is pressed.| 542| SLIDE_ONLY | 1 | Users are not allowed to move the slider by touching the slider.| 543| SLIDE_AND_CLICK_UP | 2 |Users can drag the slider or touch the track to move the slider. The slider moves when the mouse is released or finger is lifted, if the release/lift position coincides with the screen press position.| 544 545## SlideRange<sup>12+</sup> 546 547Defines the callback type used in **SlideRange**. 548 549**Atomic service API**: This API can be used in atomic services since API version 12. 550 551**System capability**: SystemCapability.ArkUI.ArkUI.Full 552 553| Name| Type | Mandatory| Description | 554|----|--------| ---- |--------------| 555| from | number | No| Start of the slide range.| 556| to | number | No| End of the slide range.| 557 558> **NOTE** 559> 560> - Currently, this API takes effect only when **MIN** ≤ **from** ≤ **to** ≤ **MAX** (the values of **MIN** and **MAX** do not depend on the values set, but on the actual values that take effect). 561> - You can set either **from** or **to**, or you can set both **from** and **to**. 562> - When the API is effective, if the set **from** value is between the adjacent multiples of **step**, then **from** takes the value of the left interval multiple of **step** or **MIN** as the corrected value. 563> - When the API is effective, if the set **to** value is between the adjacent multiples of **step**, then **to** takes the value of the right interval multiple of **step** or **MAX** as the corrected value. 564> - After **from** and **to** have taken their corrected values, when **value** is **undefined** or **null**, it takes the same value as **from**; when **value** is a number type, and if **value** ≤ **from**, then it takes **from**; if **value** > **to**, then it takes **to**. 565 566## Events 567 568In addition to the [universal events](ts-component-general-events.md), the following events are supported. 569 570### onChange 571 572onChange(callback: (value: number, mode: SliderChangeMode) => void) 573 574Triggered when the slider is dragged or clicked. 575 576The **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. 577 578If the coherent action is a drag action, the **Click** state will not be triggered. 579 580**Widget capability**: This API can be used in ArkTS widgets since API version 9. 581 582**Atomic service API**: This API can be used in atomic services since API version 11. 583 584**System capability**: SystemCapability.ArkUI.ArkUI.Full 585 586**Parameters** 587 588| Name| Type | Mandatory| Description | 589| ------ | --------------------------------------------- | ---- | ------------------------------------------------------------ | 590| value | number | Yes | Current sliding progress. Its range of changes corresponds to the array of step sizes. If the return value contains decimals, you can use the **number.toFixed()** API to process the data to the expected precision.| 591| mode | [SliderChangeMode](#sliderchangemode)| Yes | State triggered by the event. | 592 593## SliderChangeMode 594 595**Widget capability**: This API can be used in ArkTS widgets since API version 9. 596 597**Atomic service API**: This API can be used in atomic services since API version 11. 598 599**System capability**: SystemCapability.ArkUI.ArkUI.Full 600 601| Name| Value| Description| 602| -------- | -------- | -------- | 603| Begin | 0 | The user touches or clicks the thumb.| 604| Moving | 1 | The user is dragging the slider.| 605| End | 2 | The user stops dragging the slider by lifting their finger or releasing the mouse device.<br>**NOTE**<br>The trigger occurs when an invalid value is restored to the default value, that is, when the value is set to less than **min** or greater than **max**.| 606| Click<sup>8+</sup> | 3 | The user moves the thumb by touching or clicking the track.| 607 608## SliderConfiguration<sup>12+</sup> 609 610You need a custom class to implement the **ContentModifier** API. 611 612**Atomic service API**: This API can be used in atomic services since API version 12. 613 614**System capability**: SystemCapability.ArkUI.ArkUI.Full 615 616| Name | Type | Read Only | Optional | Description | 617| ------ | ------ | ---------------- | ---------------- | ---------------- | 618| value | number | No| No| Current progress.| 619| min | number | No| No| Minimum value.| 620| max | number | No| No| Maximum value.| 621| step | number | No| No| Step of the slider.| 622| triggerChange | [SliderTriggerChangeCallback](#slidertriggerchangecallback12) | No| No| Triggers slider changes.| 623 624## SliderTriggerChangeCallback<sup>12+</sup> 625 626type SliderTriggerChangeCallback = (value: number, mode: SliderChangeMode) => void 627 628Defines the callback type used in **SliderConfiguration**. 629 630**Atomic service API**: This API can be used in atomic services since API version 12. 631 632**System capability**: SystemCapability.ArkUI.ArkUI.Full 633 634**Parameters** 635 636| Name| Type | Mandatory| Description | 637| ------ | ------ | ---------------- | ---------------- | 638| value | number | Yes| Current progress.<br>Value range: [[min](#slideroptions), [max](#slideroptions)]| 639| mode | [SliderChangeMode](#sliderchangemode)| Yes| State triggered by the event.| 640 641## Example 642 643### Example 1: Using Basic Slider Styles 644 645This example demonstrates how to control the display of the tooltip, current step, and slider thumb and track by configuring **style**, **showTips**, and **showSteps**. 646 647```ts 648// xxx.ets 649@Entry 650@Component 651struct SliderExample { 652 @State outSetValueOne: number = 40 653 @State inSetValueOne: number = 40 654 @State noneValueOne: number = 40 655 @State outSetValueTwo: number = 40 656 @State inSetValueTwo: number = 40 657 @State vOutSetValueOne: number = 40 658 @State vInSetValueOne: number = 40 659 @State vOutSetValueTwo: number = 40 660 @State vInSetValueTwo: number = 40 661 662 build() { 663 Column({ space: 8 }) { 664 Text('outset slider').fontSize(9).fontColor(0xCCCCCC).width('90%').margin(15) 665 Row() { 666 Slider({ 667 value: this.outSetValueOne, 668 min: 0, 669 max: 100, 670 style: SliderStyle.OutSet 671 }) 672 .showTips(true) 673 .onChange((value: number, mode: SliderChangeMode) => { 674 this.outSetValueOne = value 675 console.info('value:' + value + 'mode:' + mode.toString()) 676 }) 677 // toFixed(0) converts the return value of the slider to an integer. 678 Text(this.outSetValueOne.toFixed(0)).fontSize(12) 679 } 680 .width('80%') 681 Row() { 682 Slider({ 683 value: this.outSetValueTwo, 684 step: 10, 685 style: SliderStyle.OutSet 686 }) 687 .showSteps(true) 688 .onChange((value: number, mode: SliderChangeMode) => { 689 this.outSetValueTwo = value 690 console.info('value:' + value + 'mode:' + mode.toString()) 691 }) 692 Text(this.outSetValueTwo.toFixed(0)).fontSize(12) 693 } 694 .width('80%') 695 696 Text('inset slider').fontSize(9).fontColor(0xCCCCCC).width('90%').margin(15) 697 Row() { 698 Slider({ 699 value: this.inSetValueOne, 700 min: 0, 701 max: 100, 702 style: SliderStyle.InSet 703 }) 704 .blockColor('#191970') 705 .trackColor('#ADD8E6') 706 .selectedColor('#4169E1') 707 .showTips(true) 708 .onChange((value: number, mode: SliderChangeMode) => { 709 this.inSetValueOne = value 710 console.info('value:' + value + 'mode:' + mode.toString()) 711 }) 712 Text(this.inSetValueOne.toFixed(0)).fontSize(12) 713 } 714 .width('80%') 715 Row() { 716 Slider({ 717 value: this.inSetValueTwo, 718 step: 10, 719 style: SliderStyle.InSet 720 }) 721 .blockColor('#191970') 722 .trackColor('#ADD8E6') 723 .selectedColor('#4169E1') 724 .showSteps(true) 725 .onChange((value: number, mode: SliderChangeMode) => { 726 this.inSetValueTwo = value 727 console.info('value:' + value + 'mode:' + mode.toString()) 728 }) 729 Text(this.inSetValueTwo.toFixed(0)).fontSize(12) 730 } 731 .width('80%') 732 733 Text('none slider').fontSize(9).fontColor(0xCCCCCC).width('90%').margin(15) 734 Row() { 735 Slider({ 736 value: this.noneValueOne, 737 min: 0, 738 max: 100, 739 style: SliderStyle.NONE 740 }) 741 .blockColor('#191970') 742 .trackColor('#ADD8E6') 743 .selectedColor('#4169E1') 744 .showTips(true) 745 .onChange((value: number, mode: SliderChangeMode) => { 746 this.noneValueOne = value 747 console.info('value:' + value + 'mode:' + mode.toString()) 748 }) 749 Text(this.noneValueOne.toFixed(0)).fontSize(12) 750 } 751 .width('80%') 752 753 Row() { 754 Column() { 755 Text('vertical outset slider').fontSize(9).fontColor(0xCCCCCC).width('50%').margin(15) 756 Row() { 757 Text().width('10%') 758 Slider({ 759 value: this.vOutSetValueOne, 760 style: SliderStyle.OutSet, 761 direction: Axis.Vertical 762 }) 763 .blockColor('#191970') 764 .trackColor('#ADD8E6') 765 .selectedColor('#4169E1') 766 .showTips(true) 767 .onChange((value: number, mode: SliderChangeMode) => { 768 this.vOutSetValueOne = value 769 console.info('value:' + value + 'mode:' + mode.toString()) 770 }) 771 Slider({ 772 value: this.vOutSetValueTwo, 773 step: 10, 774 style: SliderStyle.OutSet, 775 direction: Axis.Vertical 776 }) 777 .blockColor('#191970') 778 .trackColor('#ADD8E6') 779 .selectedColor('#4169E1') 780 .showSteps(true) 781 .onChange((value: number, mode: SliderChangeMode) => { 782 this.vOutSetValueTwo = value 783 console.info('value:' + value + 'mode:' + mode.toString()) 784 }) 785 } 786 }.width('50%').height(300) 787 788 Column() { 789 Text('vertical inset slider').fontSize(9).fontColor(0xCCCCCC).width('50%').margin(15) 790 Row() { 791 Slider({ 792 value: this.vInSetValueOne, 793 style: SliderStyle.InSet, 794 direction: Axis.Vertical, 795 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. 796 }) 797 .showTips(true) 798 .onChange((value: number, mode: SliderChangeMode) => { 799 this.vInSetValueOne = value 800 console.info('value:' + value + 'mode:' + mode.toString()) 801 }) 802 Slider({ 803 value: this.vInSetValueTwo, 804 step: 10, 805 style: SliderStyle.InSet, 806 direction: Axis.Vertical, 807 reverse: true 808 }) 809 .showSteps(true) 810 .onChange((value: number, mode: SliderChangeMode) => { 811 this.vInSetValueTwo = value 812 console.info('value:' + value + 'mode:' + mode.toString()) 813 }) 814 } 815 }.width('50%').height(300) 816 } 817 }.width('100%') 818 } 819} 820``` 821 822 823 824### Example 2: Using Custom Slider Styles 825 826This example demonstrates how to customize the slider styles by setting **blockBorderColor**, **blockSize**, **blockBorderWidth**, and **blockStyle** for the slider block, **stepSize** and **stepColor** for the step, **trackBorderRadius** for the track's corner radius, and **selectedBorderRadius** for the selected part's corner radius. 827 828```ts 829@Entry 830@Component 831struct SliderExample { 832 @State tipsValue: number = 40 833 834 build() { 835 Column({ space: 8 }) { 836 Text('block').fontSize(9).fontColor(0xCCCCCC).margin(15).width('90%') 837 Slider({ style: SliderStyle.OutSet, value: 40 }) 838 .blockSize({ width: 40, height: 40 }) 839 .blockBorderColor(Color.Red) 840 .blockBorderWidth(5) 841 Divider() 842 Text('step').fontSize(9).fontColor(0xCCCCCC).margin(15).width('90%') 843 Slider({ style: SliderStyle.InSet, value: 40, step: 10 }) 844 .showSteps(true) 845 .stepSize(8) 846 .stepColor(Color.Yellow) 847 Divider() 848 Text('track').fontSize(9).fontColor(0xCCCCCC).margin(15).width('90%') 849 Slider({ style: SliderStyle.InSet, value: 40 }) 850 .trackBorderRadius(2) 851 Divider() 852 Text('selected').fontSize(9).fontColor(0xCCCCCC).margin(15).width('90%') 853 Slider({ style: SliderStyle.InSet, value: 40 }) 854 .selectedBorderRadius(2) 855 Divider() 856 Text('blockStyle').fontSize(9).fontColor(0xCCCCCC).margin(15).width('90%') 857 Slider({ style: SliderStyle.OutSet, value: 40 }) 858 .blockStyle({ type: SliderBlockType.DEFAULT }) 859 Slider({ style: SliderStyle.OutSet, value: 40 }) 860 .blockStyle({ type: SliderBlockType.IMAGE, image: $r('sys.media.ohos_app_icon') }) 861 Slider({ style: SliderStyle.OutSet, value: 40 }) 862 .blockSize({ width: '60px', height: '60px' }) 863 .blockColor(Color.Red) 864 .blockStyle({ type: SliderBlockType.SHAPE, shape: new Path({ commands: 'M60 60 M30 30 L15 56 L45 56 Z' }) }) 865 Divider() 866 Text('tips').fontSize(9).fontColor(0xCCCCCC).margin(15).width('90%') 867 Slider({ style: SliderStyle.InSet, value: this.tipsValue }) 868 .showTips(true, this.tipsValue.toFixed()) 869 .onChange(value => { 870 this.tipsValue = value 871 }) 872 } 873 } 874} 875``` 876 877 878 879 880 881### Example 3: Customizing the Slider 882 883This example demonstrates how to customize the **Slider** component using a style builder to define the content area. Clicking the increase button will increment the progress bar by the step size set in the original **Slider** component, and clicking the decrease button will decrement the progress bar, triggering the **onChange** event of the original component. 884 885```ts 886// xxx.ets 887 888@Builder function buildSlider(config: SliderConfiguration) { 889 Row() { 890 Column({space: 30}) { 891 Progress({value: config.value, total: config.max, type:ProgressType.Ring}) 892 .margin({ top:20 }) 893 894 Button('Increase').onClick(() => { 895 config.value = config.value + config.step 896 config.triggerChange(config.value, SliderChangeMode.Click) 897 }) 898 .width(100) 899 .height(25) 900 .fontSize(10) 901 .enabled(config.value<config.max) 902 903 Button('Decrease').onClick(() => { 904 config.value=config.value-config.step 905 config.triggerChange(config.value, SliderChangeMode.Click) 906 }) 907 .width(100) 908 .height(25) 909 .fontSize(10) 910 .enabled(config.value>config.min) 911 912 Slider({ 913 value: config.value, 914 min: config.min, 915 max: config.max, 916 step:config.step, 917 }) 918 .width(config.max) 919 .visibility((config.contentModifier as MySliderStyle).showSlider?Visibility.Visible:Visibility.Hidden) 920 .showSteps(true) 921 .onChange((value: number, mode: SliderChangeMode) => { 922 config.triggerChange(value, mode) 923 }) 924 Text('Current state: '+ ((config.contentModifier as MySliderStyle).sliderChangeMode==0?"Begin" 925 :((config.contentModifier as MySliderStyle).sliderChangeMode==1?"Moving" 926 :((config.contentModifier as MySliderStyle).sliderChangeMode==2?"End" 927 :((config.contentModifier as MySliderStyle).sliderChangeMode==3?"Click":"None"))))) 928 .fontSize(10) 929 Text('Progress: '+ config.value) 930 .fontSize(10) 931 Text('Min: ' + config.min) 932 .fontSize(10) 933 Text('Max: ' + config.max) 934 .fontSize(10) 935 Text('Step: ' + config.step) 936 .fontSize(10) 937 } 938 .width('80%') 939 940 } 941 .width('100%') 942} 943 944class MySliderStyle implements ContentModifier<SliderConfiguration> { 945 showSlider:boolean=true 946 sliderChangeMode:number=0 947 constructor(showSlider: boolean,sliderChangeMode:number) { 948 this.showSlider = showSlider 949 this.sliderChangeMode = sliderChangeMode 950 } 951 applyContent() : WrappedBuilder<[SliderConfiguration]> { 952 return wrapBuilder(buildSlider) 953 } 954} 955 956 957@Entry 958@Component 959struct SliderExample { 960 @State showSlider:boolean=true 961 @State sliderValue: number = 0 962 @State sliderMin: number = 10 963 @State sliderMax: number = 100 964 @State sliderStep: number = 20 965 @State sliderChangeMode: number = 0 966 967 build() { 968 Column({ space: 8 }) { 969 970 Row() { 971 Slider({ 972 value: this.sliderValue, 973 min: this.sliderMin, 974 max: this.sliderMax, 975 step:this.sliderStep, 976 }) 977 .showSteps(true) 978 .onChange((value: number, mode: SliderChangeMode) => { 979 this.sliderValue = value 980 this.sliderChangeMode=mode 981 console.info(' [SliderLog] value:' + value + 'mode:' + mode.toString()) 982 }) 983 .contentModifier(new MySliderStyle(this.showSlider,this.sliderChangeMode)) 984 985 } 986 .width('100%') 987 988 }.width('100%') 989 } 990} 991``` 992 993 994
