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 33Provides information about the slider. 34 35**Widget capability**: This API can be used in ArkTS widgets since API version 9. 36 37**Atomic service API**: This API can be used in atomic services since API version 11. 38 39**System capability**: SystemCapability.ArkUI.ArkUI.Full 40 41| Name| Type| Mandatory| Description| 42| -------- | -------- | -------- | -------- | 43| 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 [$$](../../../ui/state-management/arkts-two-way-sync.md).<br>This parameter supports two-way binding through the [!! syntax](../../../ui/state-management/arkts-new-binding.md#two-way-binding-between-built-in-component-parameters).<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**.| 44| min | number | No| Minimum value.<br>Default value: **0**| 45| 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.| 46| 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.| 47| style | [SliderStyle](#sliderstyle) | No| Style of the slider thumb and track.<br>Default value: **SliderStyle.OutSet**| 48| direction<sup>8+</sup> | [Axis](ts-appendix-enums.md#axis) | No| Whether the slider moves horizontally or vertically.<br>Default value: **Axis.Horizontal**| 49| 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.<br>**false**: Horizontal sliders slide from left to right, while vertical sliders slide from top to bottom.| 50 51## SliderStyle 52 53Enumerates the display styles of the slider thumb relative to the track. 54 55**System capability**: SystemCapability.ArkUI.ArkUI.Full 56 57| Name| Description| 58| -------- | -------- | 59| 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.| 60| 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.| 61| 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.| 62 63> **NOTE** 64> 65> - By default, the slider has no padding. 66> - For horizontal sliders, the default height is 40 vp, the width matches the parent container's width, and the track maintains center alignment. When **SliderStyle.OutSet** is used, it applies 9 vp (half of the [blockSize](#blocksize10) value) margins on both left and right sides. When **SliderStyle.InSet** is used, it enforces 6 vp margins on both left and right sides. Custom padding values will be applied in addition to these default margins and will not override them. 67> - For vertical sliders, the default width is 40 vp, the height matches the parent container's height, and the track maintains center alignment. When **SliderStyle.OutSet** is used, it applies 10 vp margins on both top and bottom sides. When **SliderStyle.InSet** is used, it enforces 6 vp margins on both top and bottom sides. Custom padding values will be applied in addition to these default margins and will not override them. 68 69## Attributes 70 71All the [universal attributes](ts-component-general-attributes.md) except **responseRegion** are supported. 72 73### blockColor 74 75blockColor(value: ResourceColor) 76 77Sets the color of the thumb. 78 79When **SliderBlockType.DEFAULT** is used, **blockColor** sets the color of the round thumb. 80 81When **SliderBlockType.IMAGE** is used, **blockColor** does not work as the thumb has no fill color. 82 83When **SliderBlockType.SHAPE** is used, **blockColor** sets the color of the thumb in a custom shape. 84 85**Widget capability**: This API can be used in ArkTS widgets since API version 9. 86 87**Atomic service API**: This API can be used in atomic services since API version 11. 88 89**System capability**: SystemCapability.ArkUI.ArkUI.Full 90 91**Parameters** 92 93| Name| Type | Mandatory| Description | 94| ------ | ------------------------------------------ | ---- | ----------------------------------- | 95| value | [ResourceColor](ts-types.md#resourcecolor) | Yes | Color of the thumb.<br>Default value: **$r('sys.color.ohos_id_color_foreground_contrary')**| 96 97### trackColor 98 99trackColor(value: ResourceColor | LinearGradient) 100 101Sets the background color of the track. 102 103Since API version 12, **LinearGradient** can be used to create a gradient effect for the track. 104 105**Widget capability**: This API can be used in ArkTS widgets since API version 9. 106 107**Atomic service API**: This API can be used in atomic services since API version 11. 108 109**System capability**: SystemCapability.ArkUI.ArkUI.Full 110 111**Parameters** 112 113| Name| Type | Mandatory| Description | 114| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 115| 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. Default value: **$r('sys.color.ohos_id_color_component_normal')**. The **LinearGradient** type cannot be used in atomic services.| 116 117### selectedColor 118 119selectedColor(value: ResourceColor) 120 121Sets the color of the portion of the track between the minimum value and the thumb, representing the selected portion. 122 123**Widget capability**: This API can be used in ArkTS widgets since API version 9. 124 125**Atomic service API**: This API can be used in atomic services since API version 11. 126 127**System capability**: SystemCapability.ArkUI.ArkUI.Full 128 129**Parameters** 130 131| Name| Type | Mandatory| Description | 132| ------ | ------------------------------------------ | ---- | ------------------------------------------------------------ | 133| 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')**| 134 135### selectedColor<sup>18+</sup> 136 137selectedColor(selectedColor: ResourceColor | LinearGradient) 138 139Sets the color of the portion of the track between the minimum value and the thumb, representing the selected portion. Compared with [selectedColor](#selectedcolor), this API supports the **LinearGradient** type. 140 141Since API version 18, **LinearGradient** can be used to create a gradient effect for the selected portion. 142 143**Widget capability**: This API can be used in ArkTS widgets since API version 18. 144 145**Atomic service API**: This API can be used in atomic services since API version 18. 146 147**System capability**: SystemCapability.ArkUI.ArkUI.Full 148 149**Parameters** 150 151| Name | Type | Mandatory| Description | 152| ------------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 153| 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')**| 154 155### showSteps 156 157showSteps(value: boolean) 158 159Sets whether to display the step markers along the slider track. 160 161**Widget capability**: This API can be used in ArkTS widgets since API version 9. 162 163**Atomic service API**: This API can be used in atomic services since API version 11. 164 165**System capability**: SystemCapability.ArkUI.ArkUI.Full 166 167**Parameters** 168 169| Name| Type | Mandatory| Description | 170| ------ | ------- | ---- | ------------------------------------------ | 171| value | boolean | Yes | Whether to display the step markers along the slider track. <br>**true**: Display the step markers.<br>**false**: Hide the step markers.<br>Default value: **false**.| 172 173### showTips 174 175showTips(value: boolean, content?: ResourceStr) 176 177Sets whether to display a tooltip when the user drags the slider. 178 179When **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. 180 181The drawing area of the tooltip is the overlay of the slider. 182 183**Widget capability**: This API can be used in ArkTS widgets since API version 9. 184 185**Atomic service API**: This API can be used in atomic services since API version 11. 186 187**System capability**: SystemCapability.ArkUI.ArkUI.Full 188 189**Parameters** 190 191| Name | Type | Mandatory| Description | 192| --------------------- | -------------------------------------- | ---- | ------------------------------------------ | 193| value | boolean | Yes | Whether to display a tooltip when the user drags the slider. The value **true** means to display a tooltip, and **false** means the opposite.<br>Default value: **false**.| 194| content<sup>10+</sup> | [ResourceStr](ts-types.md#resourcestr) | No | Content of the tooltip. By default, the tooltip shows the current percentage value. | 195 196### trackThickness<sup>8+</sup> 197 198trackThickness(value: Length) 199 200Sets the thickness of the track. If the value is less than or equal to 0, the default value is used. 201 202To ensure [SliderStyle](#sliderstyle) works as expected for the thumb and track, [blockSize](#blocksize10) should increase or decrease proportionally with **trackThickness**. 203 204Specially, when **style** is **[SliderStyle](#sliderstyle).OutSet**, trackThickness: [blockSize](#blocksize10) = 1:4; when **style** is **[SliderStyle](#sliderstyle).InSet**, trackThickness: [blockSize](#blocksize10) = 5:3. 205 206If the value of **trackThickness** or [blockSize](#blocksize10) exceeds the width or height of the **Slider** component, the default value is used. 207 208When [SliderStyle](#sliderstyle) is set to **OutSet**, if the specified value of [blockSize](#blocksize10) exceeds the width or height of the **Slider** component, the default value is used, regardless of whether the value of **trackThickness** is valid or not. 209 210**Widget capability**: This API can be used in ArkTS widgets since API version 9. 211 212**Atomic service API**: This API can be used in atomic services since API version 11. 213 214**System capability**: SystemCapability.ArkUI.ArkUI.Full 215 216**Parameters** 217 218| Name| Type | Mandatory| Description | 219| ------ | ---------------------------- | ---- | ------------------------------------------------------------ | 220| 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**| 221 222### blockBorderColor<sup>10+</sup> 223 224blockBorderColor(value: ResourceColor) 225 226Sets the border color of the slider in the block direction. 227 228When **SliderBlockType.DEFAULT** is used, **blockBorderColor** sets the border color of the round slider. 229 230When **SliderBlockType.IMAGE** is used, **blockBorderColor** does not work as the slider has no border. 231 232When **SliderBlockType.SHAPE** is used, **blockBorderColor** sets the border color of the slider in a custom shape. 233 234**Atomic service API**: This API can be used in atomic services since API version 11. 235 236**System capability**: SystemCapability.ArkUI.ArkUI.Full 237 238**Parameters** 239 240| Name| Type | Mandatory| Description | 241| ------ | ------------------------------------------ | ---- | -------------------------------------- | 242| value | [ResourceColor](ts-types.md#resourcecolor) | Yes | Border color of the slider in the block direction.<br>Default value: **'#00000000'**| 243 244### blockBorderWidth<sup>10+</sup> 245 246blockBorderWidth(value: Length) 247 248Sets the border width of the slider in the block direction. 249 250When **SliderBlockType.DEFAULT** is used, **blockBorderWidth** sets the border width of the round slider. 251 252When **SliderBlockType.IMAGE** is used, **blockBorderWidth** does not work as the slider has no border. 253 254When **SliderBlockType.SHAPE** is used, **blockBorderWidth** sets the border width of the slider in a custom shape. 255 256**Atomic service API**: This API can be used in atomic services since API version 11. 257 258**System capability**: SystemCapability.ArkUI.ArkUI.Full 259 260**Parameters** 261 262| Name| Type | Mandatory| Description | 263| ------ | ---------------------------- | ---- | -------------- | 264| 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.| 265 266### stepColor<sup>10+</sup> 267 268stepColor(value: ResourceColor) 269 270Sets the step color. 271 272**Atomic service API**: This API can be used in atomic services since API version 11. 273 274**System capability**: SystemCapability.ArkUI.ArkUI.Full 275 276**Parameters** 277 278| Name| Type | Mandatory| Description | 279| ------ | ------------------------------------------ | ---- | ---------------------------------- | 280| 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| 281 282### trackBorderRadius<sup>10+</sup> 283 284trackBorderRadius(value: Length) 285 286Sets the radius of the rounded corner of the track. 287 288**Atomic service API**: This API can be used in atomic services since API version 11. 289 290**System capability**: SystemCapability.ArkUI.ArkUI.Full 291 292**Parameters** 293 294| Name| Type | Mandatory| Description | 295| ------ | ---------------------------- | ---- | -------------------------------- | 296| 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.| 297 298### selectedBorderRadius<sup>12+</sup> 299 300selectedBorderRadius(value: Dimension) 301 302Set the corner radius of the selected (highlighted) part of the slider. 303 304**Atomic service API**: This API can be used in atomic services since API version 12. 305 306**System capability**: SystemCapability.ArkUI.ArkUI.Full 307 308**Parameters** 309 310| Name| Type | Mandatory| Description | 311| ------ | ---------------------------- | ---- | -------------------------------- | 312| 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.| 313 314### blockSize<sup>10+</sup> 315 316blockSize(value: SizeOptions) 317 318Sets the size of the slider in the block direction. 319 320When the slider type is set to **SliderBlockType.DEFAULT**, the smaller of the width and height values is used as the radius of the circle. 321 322When the slider type is set to **SliderBlockType.IMAGE**, this API sets the size of the image, which is scaled using the **ObjectFit.Cover** strategy. 323 324When 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. 325 326**Atomic service API**: This API can be used in atomic services since API version 11. 327 328**System capability**: SystemCapability.ArkUI.ArkUI.Full 329 330**Parameters** 331 332| Name| Type | Mandatory| Description | 333| ------ | -------------------------------------- | ---- | ------------------------------------------------------------ | 334| 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.| 335 336### blockStyle<sup>10+</sup> 337 338blockStyle(value: SliderBlockStyle) 339 340Sets the style of the slider in the block direction. 341 342**Atomic service API**: This API can be used in atomic services since API version 11. 343 344**System capability**: SystemCapability.ArkUI.ArkUI.Full 345 346**Parameters** 347 348| Name| Type | Mandatory| Description | 349| ------ | ----------------------------------------------- | ---- | ------------------------------------------------------------ | 350| value | [SliderBlockStyle](#sliderblockstyle10) | Yes | Style of the slider in the block direction.<br>Default value: **SliderBlockType.DEFAULT**, indicating the round slider.| 351 352### stepSize<sup>10+</sup> 353 354stepSize(value: Length) 355 356Sets 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. 357 358**Atomic service API**: This API can be used in atomic services since API version 11. 359 360**System capability**: SystemCapability.ArkUI.ArkUI.Full 361 362**Parameters** 363 364| Name| Type | Mandatory| Description | 365| ------ | ---------------------------- | ---- | ------------------------------------- | 366| value | [Length](ts-types.md#length) | Yes | Step size (diameter).<br>Default value: **'4vp'**<br>Value range: [0, [trackThickness](#trackthickness8))| 367 368### minLabel<sup>(deprecated)</sup> 369 370minLabel(value: string) 371 372Sets the minimum value. 373 374This API is deprecated since API version 9. You are advised to use **min** instead. 375 376**System capability**: SystemCapability.ArkUI.ArkUI.Full 377 378**Parameters** 379 380| Name| Type | Mandatory| Description | 381| ------ | ------ | ---- | -------- | 382| value | string | Yes | Minimum value.| 383 384### maxLabel<sup>(deprecated)</sup> 385 386maxLabel(value: string) 387 388Sets the maximum value. 389 390This API is deprecated since API version 9. You are advised to use **max** instead. 391 392**System capability**: SystemCapability.ArkUI.ArkUI.Full 393 394**Parameters** 395 396| Name| Type | Mandatory| Description | 397| ------ | ------ | ---- | -------- | 398| value | string | Yes | Maximum value.| 399 400### sliderInteractionMode<sup>12+</sup> 401 402sliderInteractionMode(value: SliderInteraction) 403 404Sets the interaction mode between the user and the slider. 405 406**Atomic service API**: This API can be used in atomic services since API version 12. 407 408**System capability**: SystemCapability.ArkUI.ArkUI.Full 409 410**Parameters** 411 412| Name| Type | Mandatory| Description | 413| ------ | ------------------------------------------------- | ---- | ------------------------------------------------------------ | 414| value | [SliderInteraction](#sliderinteraction12)| Yes | Interaction mode between the user and the slider.<br> Default value: **SliderInteraction.SLIDE_AND_CLICK**| 415 416### minResponsiveDistance<sup>12+</sup> 417 418minResponsiveDistance(value: number) 419 420Sets the minimum distance required for the slider to respond. 421 422**Atomic service API**: This API can be used in atomic services since API version 12. 423 424**System capability**: SystemCapability.ArkUI.ArkUI.Full 425 426**Parameters** 427 428| Name| Type | Mandatory| Description | 429| ------ | ------- | ---- | ------------------------------------------ | 430| value | number | Yes | Minimum distance required for the slider to respond. The slider will only 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** | 431 432### contentModifier<sup>12+</sup> 433 434contentModifier(modifier: ContentModifier\<SliderConfiguration>) 435 436Creates a content modifier. 437 438**Atomic service API**: This API can be used in atomic services since API version 12. 439 440**System capability**: SystemCapability.ArkUI.ArkUI.Full 441 442**Parameters** 443 444| Name| Type | Mandatory| Description | 445| ------ | --------------------------------------------- | ---- | ------------------------------------------------ | 446| 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.| 447 448> **NOTE** 449> 450> - If **contentModifier** is set, then clicks and gestures within the custom area will not trigger the **onChange** event of the original slider. 451> - The **onChange** event of the original slider can only be triggered when the **triggerChange** API is called with valid parameter values. 452 453### slideRange<sup>12+</sup> 454 455slideRange(value: SlideRange) 456 457Sets the slide range. 458 459**Atomic service API**: This API can be used in atomic services since API version 12. 460 461**System capability**: SystemCapability.ArkUI.ArkUI.Full 462 463**Parameters** 464 465| Name| Type | Mandatory| Description | 466| ------ | ----------------------------------- | ---- | ---------------- | 467| value | [SlideRange](#sliderange12) | Yes | Slide range.| 468 469### enableHapticFeedback<sup>18+</sup> 470 471enableHapticFeedback(enabled: boolean) 472 473Specifies whether to enable haptic feedback. 474 475To enable haptic feedback, you must declare the ohos.permission.VIBRATE permission under **requestPermissions** in the **module.json5** file of the project. 476 477```json 478"requestPermissions": [ 479 { 480 "name": "ohos.permission.VIBRATE", 481 } 482 ] 483``` 484 485**Atomic service API**: This API can be used in atomic services since API version 18. 486 487**System capability**: SystemCapability.ArkUI.ArkUI.Full 488 489| Name| Type | Mandatory | Description | 490| ------ | --------------------------------------------- |-----|-------------------------------------------------------------------------------------| 491| enabled | boolean | Yes | Whether to enable haptic feedback.<br>**true** (default): Haptic feedback is enabled.<br>**false**: Haptic feedback is disabled.| 492 493### digitalCrownSensitivity<sup>18+</sup> 494 495digitalCrownSensitivity(sensitivity: Optional\<CrownSensitivity>) 496 497Sets the sensitivity to the digital crown rotation. 498 499**Atomic service API**: This API can be used in atomic services since API version 18. 500 501**System capability**: SystemCapability.ArkUI.ArkUI.Full 502 503**Parameters** 504 505| Name | Type | Mandatory| Description | 506| ----------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------- | 507| sensitivity | [Optional\<CrownSensitivity>](ts-appendix-enums.md#crownsensitivity18) | Yes | Sensitivity to the digital crown rotation.<br>Default value: **CrownSensitivity.MEDIUM**| 508 509### prefix<sup>20+</sup> 510 511prefix(content: ComponentContent, options?: SliderPrefixOptions) 512 513Sets the prefix of the slider. 514 515**Atomic service API**: This API can be used in atomic services since API version 20. 516 517**System capability**: SystemCapability.ArkUI.ArkUI.Full 518 519**Parameters** 520 521| Name | Type | Mandatory| Description | 522| ----------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------- | 523| content | [ComponentContent](../js-apis-arkui-ComponentContent.md) | Yes | Visual content of the slider prefix, which will be displayed at the start of the slider.| 524| options | [SliderPrefixOptions](#sliderprefixoptions20) | No | Accessibility configuration of the slider prefix.| 525 526### suffix<sup>20+</sup> 527 528suffix(content: ComponentContent, options?: SliderSuffixOptions) 529 530Sets the suffix of the slider. 531 532**Atomic service API**: This API can be used in atomic services since API version 20. 533 534**System capability**: SystemCapability.ArkUI.ArkUI.Full 535 536**Parameters** 537 538| Name | Type | Mandatory| Description | 539| ----------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------- | 540| content | [ComponentContent](../js-apis-arkui-ComponentContent.md) | Yes | Visual content of the slider suffix, which will be displayed at the end of the slider.| 541| options | [SliderSuffixOptions](#slidersuffixoptions20) | No | Accessibility configuration of the slider suffix.| 542 543### showSteps<sup>20+</sup> 544 545showSteps(value: boolean, options?: SliderShowStepOptions) 546 547Sets whether to display the step markers along the slider track. 548 549You can set custom accessibility text for each step value. If no accessibility text is provided, the numeric values are used. 550 551The accessibility text settings take effect only when the step markers are displayed. 552 553**Widget capability**: This API can be used in ArkTS widgets since API version 20. 554 555**Atomic service API**: This API can be used in atomic services since API version 20. 556 557**System capability**: SystemCapability.ArkUI.ArkUI.Full 558 559**Parameters** 560 561| Name | Type | Mandatory| Description | 562| ----------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------- | 563| value | boolean | Yes| Whether to display the step markers along the slider track. <br>**true**: Display the step markers.<br>**false**: Hide the step markers.<br>Default value: **false**.| 564| options | [SliderShowStepOptions](#slidershowstepoptions20) | No| Accessibility configuration of step markers.<br>Default value: **null**.| 565 566## SliderCustomContentOptions<sup>20+</sup> 567 568Provides accessibility configuration of the slider prefix and suffix. 569 570**Atomic service API**: This API can be used in atomic services since API version 20. 571 572**System capability**: SystemCapability.ArkUI.ArkUI.Full 573 574| Name | Type | Mandatory| Description | 575| ------------------------ | ----------- | ---- | ------------------------------------------------------------ | 576| accessibilityText | [ResourceStr](ts-types.md#resourcestr) | No | Text for assistive technologies (for example, screen readers).<br>Default value: **""**.| 577| accessibilityDescription | [ResourceStr](ts-types.md#resourcestr) | No | Detailed functional description for assistive technologies.<br>Default value: **"Double-tap to activate"**.| 578| accessibilityLevel | string | No | Whether the component can be recognized by accessibility services.<br>The options are as follows:<br>**"auto"**: It is treated as "yes" by the system.<br>**"yes"**: The component can be recognized by accessibility services.<br>**"no"**: The component cannot be recognized by accessibility services.<br>**"no-hide-descendants"**: Neither the component nor its child components can be recognized by accessibility services.<br>Default value: **"auto"**.| 579| accessibilityGroup | boolean | No | Whether to enable accessibility grouping. The value **true** means to enable accessibility grouping, and **false** means the opposite. When accessibility grouping is enabled, the component and all its children are treated as a single selectable unit, and the accessibility service will no longer focus on the individual child components.<br>Default value: **false**.| 580 581## SliderPrefixOptions<sup>20+</sup> 582 583Provides accessibility configuration of the slider prefix. Inherits from [SliderCustomContentOptions](#slidercustomcontentoptions20). 584 585**Atomic service API**: This API can be used in atomic services since API version 20. 586 587**System capability**: SystemCapability.ArkUI.ArkUI.Full 588 589## SliderSuffixOptions<sup>20+</sup> 590 591Provides accessibility configuration of the slider suffix. Inherits from [SliderCustomContentOptions](#slidercustomcontentoptions20). 592 593**Atomic service API**: This API can be used in atomic services since API version 20. 594 595**System capability**: SystemCapability.ArkUI.ArkUI.Full 596 597## SliderStepItemAccessibility<sup>20+</sup> 598 599Provides accessibility configuration of the slider step markers. 600 601**Atomic service API**: This API can be used in atomic services since API version 20. 602 603**System capability**: SystemCapability.ArkUI.ArkUI.Full 604 605| Name | Type | Mandatory| Description | 606| ------------------------ | ----------- | ---- | ------------------------------------------------------------ | 607| text | [ResourceStr](ts-types.md#resourcestr) | No| Text for assistive technologies (for example, screen readers).<br>Default value: **""**.| 608 609## SliderShowStepOptions<sup>20+</sup> 610 611Provides accessibility text mapping for the slider step markers. 612 613**Atomic service API**: This API can be used in atomic services since API version 20. 614 615**System capability**: SystemCapability.ArkUI.ArkUI.Full 616 617| Name | Type | Mandatory| Description | 618| ------------------------ | ----------- | ---- | ------------------------------------------------------------ | 619| stepsAccessibility | Map<number, [SliderStepItemAccessibility](#sliderstepitemaccessibility20)> | No| Step value-to-text mappings for assistive technologies (for example, screen readers).<br>Value range for **Key**: [0, INT32_MAX].<br>If **Key** is set to a negative number or a decimal, the setting does not take effect.<br>Default value: **{}**.| 620 621## SliderBlockStyle<sup>10+</sup> 622 623Describes the style of the slider in the block direction. 624 625**Atomic service API**: This API can be used in atomic services since API version 11. 626 627**System capability**: SystemCapability.ArkUI.ArkUI.Full 628 629| Name | Type | Mandatory| Description | 630| ----- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 631| type | [SliderBlockType](#sliderblocktype10) | Yes | Type of the slider in the block direction.<br>Default value: **SliderBlockType.DEFAULT**, indicating the round slider.| 632| 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.| 633| 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. | 634 635## SliderBlockType<sup>10+</sup> 636 637Enumerates the types of the slider in the block direction. 638 639**Atomic service API**: This API can be used in atomic services since API version 11. 640 641**System capability**: SystemCapability.ArkUI.ArkUI.Full 642 643| Name | Value| Description | 644| ------- | -- | ---------------------- | 645| DEFAULT | 0 | Round slider. | 646| IMAGE | 1 | Slider with an image background. | 647| SHAPE | 2 | Slider in a custom shape.| 648 649## SliderInteraction<sup>12+</sup> 650 651Enumerates the interaction modes between the user and the slider. 652 653**Atomic service API**: This API can be used in atomic services since API version 12. 654 655**System capability**: SystemCapability.ArkUI.ArkUI.Full 656 657| Name | Value|Description | 658| ------ | -- | ----------------------------- | 659| 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.| 660| SLIDE_ONLY | 1 | Users are not allowed to move the slider by touching the slider.| 661| 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.| 662 663## SlideRange<sup>12+</sup> 664 665Defines the callback type used in **SlideRange**. 666 667**Atomic service API**: This API can be used in atomic services since API version 12. 668 669**System capability**: SystemCapability.ArkUI.ArkUI.Full 670 671| Name| Type | Mandatory| Description | 672|----|--------| ---- |--------------| 673| from | number | No| Start of the slide range.| 674| to | number | No| End of the slide range.| 675 676> **NOTE** 677> 678> - 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). 679> - You can set either **from** or **to**, or you can set both **from** and **to**. 680> - 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. 681> - 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. 682> - 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**. 683 684## Events 685 686In addition to the [universal events](ts-component-general-events.md), the following events are supported. 687 688### onChange 689 690onChange(callback: (value: number, mode: SliderChangeMode) => void) 691 692Triggered when the slider is dragged or clicked. 693 694The **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. 695 696If the coherent action is a drag action, the **Click** state will not be triggered. 697 698**Widget capability**: This API can be used in ArkTS widgets since API version 9. 699 700**Atomic service API**: This API can be used in atomic services since API version 11. 701 702**System capability**: SystemCapability.ArkUI.ArkUI.Full 703 704**Parameters** 705 706| Name| Type | Mandatory| Description | 707| ------ | --------------------------------------------- | ---- | ------------------------------------------------------------ | 708| 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.| 709| mode | [SliderChangeMode](#sliderchangemode)| Yes | State triggered by the event. | 710 711## SliderChangeMode 712 713Enumerates the slider states. 714 715**Widget capability**: This API can be used in ArkTS widgets since API version 9. 716 717**Atomic service API**: This API can be used in atomic services since API version 11. 718 719**System capability**: SystemCapability.ArkUI.ArkUI.Full 720 721| Name| Value| Description| 722| -------- | -------- | -------- | 723| Begin | 0 | The user touches or clicks the thumb.| 724| Moving | 1 | The user is dragging the slider.| 725| 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**.| 726| Click<sup>8+</sup> | 3 | The user moves the thumb by touching or clicking the track.| 727 728## SliderConfiguration<sup>12+</sup> 729 730You need a custom class to implement the **ContentModifier** API. 731 732**Atomic service API**: This API can be used in atomic services since API version 12. 733 734**System capability**: SystemCapability.ArkUI.ArkUI.Full 735 736| Name | Type | Read Only | Optional | Description | 737| ------ | ------ | ---------------- | ---------------- | ---------------- | 738| value | number | No| No| Current progress.| 739| min | number | No| No| Minimum value.| 740| max | number | No| No| Maximum value.| 741| step | number | No| No| Step of the slider.| 742| triggerChange | [SliderTriggerChangeCallback](#slidertriggerchangecallback12) | No| No| Triggers slider changes.| 743 744## SliderTriggerChangeCallback<sup>12+</sup> 745 746type SliderTriggerChangeCallback = (value: number, mode: SliderChangeMode) => void 747 748Defines the callback type used in **SliderConfiguration**. 749 750**Atomic service API**: This API can be used in atomic services since API version 12. 751 752**System capability**: SystemCapability.ArkUI.ArkUI.Full 753 754**Parameters** 755 756| Name| Type | Mandatory| Description | 757| ------ | ------ | ---------------- | ---------------- | 758| value | number | Yes| Current progress.<br>Value range: [[min](#slideroptions), [max](#slideroptions)]| 759| mode | [SliderChangeMode](#sliderchangemode)| Yes| State triggered by the event.| 760 761## Example 762 763### Example 1: Using Basic Slider Styles 764 765This example demonstrates how to control the display of the tooltip, current step, and slider thumb and track by configuring **style**, **showTips**, and **showSteps**. 766 767```ts 768// xxx.ets 769@Entry 770@Component 771struct SliderExample { 772 @State outSetValueOne: number = 40; 773 @State inSetValueOne: number = 40; 774 @State noneValueOne: number = 40; 775 @State outSetValueTwo: number = 40; 776 @State inSetValueTwo: number = 40; 777 @State vOutSetValueOne: number = 40; 778 @State vInSetValueOne: number = 40; 779 @State vOutSetValueTwo: number = 40; 780 @State vInSetValueTwo: number = 40; 781 782 build() { 783 Column({ space: 8 }) { 784 Text('outset slider').fontSize(9).fontColor(0xCCCCCC).width('90%').margin(15) 785 Row() { 786 Slider({ 787 value: this.outSetValueOne, 788 min: 0, 789 max: 100, 790 style: SliderStyle.OutSet 791 }) 792 .showTips(true) 793 .onChange((value: number, mode: SliderChangeMode) => { 794 this.outSetValueOne = value; 795 console.info('value:' + value + 'mode:' + mode.toString()); 796 }) 797 // toFixed(0) converts the return value of the slider to an integer. 798 Text(this.outSetValueOne.toFixed(0)).fontSize(12) 799 } 800 .width('80%') 801 Row() { 802 Slider({ 803 value: this.outSetValueTwo, 804 step: 10, 805 style: SliderStyle.OutSet 806 }) 807 .showSteps(true) 808 .onChange((value: number, mode: SliderChangeMode) => { 809 this.outSetValueTwo = value; 810 console.info('value:' + value + 'mode:' + mode.toString()); 811 }) 812 Text(this.outSetValueTwo.toFixed(0)).fontSize(12) 813 } 814 .width('80%') 815 816 Text('inset slider').fontSize(9).fontColor(0xCCCCCC).width('90%').margin(15) 817 Row() { 818 Slider({ 819 value: this.inSetValueOne, 820 min: 0, 821 max: 100, 822 style: SliderStyle.InSet 823 }) 824 .blockColor('#191970') 825 .trackColor('#ADD8E6') 826 .selectedColor('#4169E1') 827 .showTips(true) 828 .onChange((value: number, mode: SliderChangeMode) => { 829 this.inSetValueOne = value; 830 console.info('value:' + value + 'mode:' + mode.toString()); 831 }) 832 Text(this.inSetValueOne.toFixed(0)).fontSize(12) 833 } 834 .width('80%') 835 Row() { 836 Slider({ 837 value: this.inSetValueTwo, 838 step: 10, 839 style: SliderStyle.InSet 840 }) 841 .blockColor('#191970') 842 .trackColor('#ADD8E6') 843 .selectedColor('#4169E1') 844 .showSteps(true) 845 .onChange((value: number, mode: SliderChangeMode) => { 846 this.inSetValueTwo = value; 847 console.info('value:' + value + 'mode:' + mode.toString()); 848 }) 849 Text(this.inSetValueTwo.toFixed(0)).fontSize(12) 850 } 851 .width('80%') 852 853 Text('none slider').fontSize(9).fontColor(0xCCCCCC).width('90%').margin(15) 854 Row() { 855 Slider({ 856 value: this.noneValueOne, 857 min: 0, 858 max: 100, 859 style: SliderStyle.NONE 860 }) 861 .blockColor('#191970') 862 .trackColor('#ADD8E6') 863 .selectedColor('#4169E1') 864 .showTips(true) 865 .onChange((value: number, mode: SliderChangeMode) => { 866 this.noneValueOne = value; 867 console.info('value:' + value + 'mode:' + mode.toString()); 868 }) 869 Text(this.noneValueOne.toFixed(0)).fontSize(12) 870 } 871 .width('80%') 872 873 Row() { 874 Column() { 875 Text('vertical outset slider').fontSize(9).fontColor(0xCCCCCC).width('50%').margin(15) 876 Row() { 877 Text().width('10%') 878 Slider({ 879 value: this.vOutSetValueOne, 880 style: SliderStyle.OutSet, 881 direction: Axis.Vertical 882 }) 883 .blockColor('#191970') 884 .trackColor('#ADD8E6') 885 .selectedColor('#4169E1') 886 .showTips(true) 887 .onChange((value: number, mode: SliderChangeMode) => { 888 this.vOutSetValueOne = value; 889 console.info('value:' + value + 'mode:' + mode.toString()); 890 }) 891 Slider({ 892 value: this.vOutSetValueTwo, 893 step: 10, 894 style: SliderStyle.OutSet, 895 direction: Axis.Vertical 896 }) 897 .blockColor('#191970') 898 .trackColor('#ADD8E6') 899 .selectedColor('#4169E1') 900 .showSteps(true) 901 .onChange((value: number, mode: SliderChangeMode) => { 902 this.vOutSetValueTwo = value; 903 console.info('value:' + value + 'mode:' + mode.toString()); 904 }) 905 } 906 }.width('50%').height(300) 907 908 Column() { 909 Text('vertical inset slider').fontSize(9).fontColor(0xCCCCCC).width('50%').margin(15) 910 Row() { 911 Slider({ 912 value: this.vInSetValueOne, 913 style: SliderStyle.InSet, 914 direction: Axis.Vertical, 915 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. 916 }) 917 .showTips(true) 918 .onChange((value: number, mode: SliderChangeMode) => { 919 this.vInSetValueOne = value; 920 console.info('value:' + value + 'mode:' + mode.toString()); 921 }) 922 Slider({ 923 value: this.vInSetValueTwo, 924 step: 10, 925 style: SliderStyle.InSet, 926 direction: Axis.Vertical, 927 reverse: true 928 }) 929 .showSteps(true) 930 .onChange((value: number, mode: SliderChangeMode) => { 931 this.vInSetValueTwo = value; 932 console.info('value:' + value + 'mode:' + mode.toString()); 933 }) 934 } 935 }.width('50%').height(300) 936 } 937 }.width('100%') 938 } 939} 940``` 941 942 943 944### Example 2: Using Custom Slider Styles 945 946This 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. 947 948```ts 949@Entry 950@Component 951struct SliderExample { 952 @State tipsValue: number = 40; 953 954 build() { 955 Column({ space: 8 }) { 956 Text('block').fontSize(9).fontColor(0xCCCCCC).margin(15).width('90%') 957 Slider({ style: SliderStyle.OutSet, value: 40 }) 958 .blockSize({ width: 40, height: 40 }) 959 .blockBorderColor(Color.Red) 960 .blockBorderWidth(5) 961 Divider() 962 Text('step').fontSize(9).fontColor(0xCCCCCC).margin(15).width('90%') 963 Slider({ style: SliderStyle.InSet, value: 40, step: 10 }) 964 .showSteps(true) 965 .stepSize(8) 966 .stepColor(Color.Yellow) 967 Divider() 968 Text('track').fontSize(9).fontColor(0xCCCCCC).margin(15).width('90%') 969 Slider({ style: SliderStyle.InSet, value: 40 }) 970 .trackBorderRadius(2) 971 Divider() 972 Text('selected').fontSize(9).fontColor(0xCCCCCC).margin(15).width('90%') 973 Slider({ style: SliderStyle.InSet, value: 40 }) 974 .selectedBorderRadius(2) 975 Divider() 976 Text('blockStyle').fontSize(9).fontColor(0xCCCCCC).margin(15).width('90%') 977 Slider({ style: SliderStyle.OutSet, value: 40 }) 978 .blockStyle({ type: SliderBlockType.DEFAULT }) 979 Slider({ style: SliderStyle.OutSet, value: 40 }) 980 .blockStyle({ type: SliderBlockType.IMAGE, image: $r('sys.media.ohos_app_icon') }) 981 Slider({ style: SliderStyle.OutSet, value: 40 }) 982 .blockSize({ width: '60px', height: '60px' }) 983 .blockColor(Color.Red) 984 .blockStyle({ type: SliderBlockType.SHAPE, shape: new Path({ commands: 'M60 60 M30 30 L15 56 L45 56 Z' }) }) 985 Divider() 986 Text('tips').fontSize(9).fontColor(0xCCCCCC).margin(15).width('90%') 987 Slider({ style: SliderStyle.InSet, value: this.tipsValue }) 988 .showTips(true, this.tipsValue.toFixed()) 989 .onChange(value => { 990 this.tipsValue = value; 991 }) 992 } 993 } 994} 995``` 996 997 998 999 1000 1001### Example 3: Customizing the Slider 1002 1003This 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. 1004 1005```ts 1006// xxx.ets 1007 1008@Builder 1009function buildSlider(config: SliderConfiguration) { 1010 Row() { 1011 Column({ space: 30 }) { 1012 Progress({ value: config.value, total: config.max, type: ProgressType.Ring }) 1013 .margin({ top: 20 }) 1014 1015 Button('Increase') 1016 .onClick(() => { 1017 config.value = config.value + config.step; 1018 config.triggerChange(config.value, SliderChangeMode.Click); 1019 }) 1020 .width(100) 1021 .height(25) 1022 .fontSize(10) 1023 .enabled(config.value < config.max) 1024 1025 Button('Decrease') 1026 .onClick(() => { 1027 config.value = config.value - config.step; 1028 config.triggerChange(config.value, SliderChangeMode.Click); 1029 }) 1030 .width(100) 1031 .height(25) 1032 .fontSize(10) 1033 .enabled(config.value > config.min) 1034 1035 Slider({ 1036 value: config.value, 1037 min: config.min, 1038 max: config.max, 1039 step: config.step, 1040 }) 1041 .width(config.max) 1042 .visibility((config.contentModifier as MySliderStyle).showSlider ? Visibility.Visible : Visibility.Hidden) 1043 .showSteps(true) 1044 .onChange((value: number, mode: SliderChangeMode) => { 1045 config.triggerChange(value, mode); 1046 }) 1047 Text('Current state: ' + ((config.contentModifier as MySliderStyle).sliderChangeMode == 0 ? "Begin" 1048 : ((config.contentModifier as MySliderStyle).sliderChangeMode == 1 ? "Moving" 1049 : ((config.contentModifier as MySliderStyle).sliderChangeMode == 2 ? "End" 1050 : ((config.contentModifier as MySliderStyle).sliderChangeMode == 3 ? "Click" : "None"))))) 1051 .fontSize(10) 1052 Text('Progress: ' + config.value) 1053 .fontSize(10) 1054 Text('Min: ' + config.min) 1055 .fontSize(10) 1056 Text('Max: ' + config.max) 1057 .fontSize(10) 1058 Text('Step: ' + config.step) 1059 .fontSize(10) 1060 } 1061 .width('80%') 1062 1063 } 1064 .width('100%') 1065} 1066 1067class MySliderStyle implements ContentModifier<SliderConfiguration> { 1068 showSlider: boolean = true; 1069 sliderChangeMode: number = 0; 1070 1071 constructor(showSlider: boolean, sliderChangeMode: number) { 1072 this.showSlider = showSlider; 1073 this.sliderChangeMode = sliderChangeMode; 1074 } 1075 1076 applyContent(): WrappedBuilder<[SliderConfiguration]> { 1077 return wrapBuilder(buildSlider); 1078 } 1079} 1080 1081 1082@Entry 1083@Component 1084struct SliderExample { 1085 @State showSlider: boolean = true; 1086 @State sliderValue: number = 0; 1087 @State sliderMin: number = 10; 1088 @State sliderMax: number = 100; 1089 @State sliderStep: number = 20; 1090 @State sliderChangeMode: number = 0; 1091 1092 build() { 1093 Column({ space: 8 }) { 1094 1095 Row() { 1096 Slider({ 1097 value: this.sliderValue, 1098 min: this.sliderMin, 1099 max: this.sliderMax, 1100 step: this.sliderStep, 1101 }) 1102 .showSteps(true) 1103 .onChange((value: number, mode: SliderChangeMode) => { 1104 this.sliderValue = value; 1105 this.sliderChangeMode = mode; 1106 console.info('[SliderLog] value:' + value + 'mode:' + mode.toString()); 1107 }) 1108 .contentModifier(new MySliderStyle(this.showSlider, this.sliderChangeMode)) 1109 1110 } 1111 .width('100%') 1112 1113 }.width('100%') 1114 } 1115} 1116``` 1117 1118 1119 1120### Example 4: Applying a Color Gradient Effect and Implementing Support for Digital Crown Interactions 1121 1122This example demonstrates how to a color gradient effect to the slider using **colorGradient** and implement support for digital crown interactions through **focusable**, **defaultFocus**, and **focusOnTouch**. 1123 1124```ts 1125// xxx.ets 1126@Entry 1127@Component 1128struct SliderExample { 1129 @State inSetValueOne: number = 60 1130 @State colorGradient: LinearGradient = new LinearGradient([{ color: "#FF0000FF", offset: 0 }, { color: "#FFFF0000", offset: 1 }]) 1131 @State sensitivity: CrownSensitivity | undefined | null = CrownSensitivity.MEDIUM 1132 scroller: Scroller = new Scroller() 1133 1134 getIntegerDigits(num: number): string { 1135 let numRound = Math.round(num); 1136 return numRound.toString(); 1137 } 1138 1139 build() { 1140 Column() { 1141 Scroll(this.scroller){ 1142 Column() { 1143 Row() { 1144 Stack({ alignContent: Alignment.Top }) { 1145 Slider({ 1146 value: this.inSetValueOne, 1147 min: 0, 1148 max: 100, 1149 style: SliderStyle.NONE, 1150 direction: Axis.Vertical, 1151 reverse: true 1152 }) 1153 .focusable(true) 1154 .defaultFocus(true) 1155 .focusOnTouch(true) 1156 .digitalCrownSensitivity(this.sensitivity) 1157 .trackColor("#26FFFFFF") 1158 .trackThickness(52) 1159 .selectedColor(this.colorGradient) 1160 .onChange((value: number, mode: SliderChangeMode) => { 1161 this.inSetValueOne = value 1162 }) 1163 } 1164 .height(233 - 66) 1165 .width(52) 1166 .margin({ top: 33, bottom: 33, left: 56 }) 1167 Column() { 1168 Text('Volume') 1169 .fontSize(19) 1170 .fontColor("#A9FFFFFF") 1171 .fontWeight(500) 1172 .textAlign(TextAlign.Start) 1173 .margin({ left: 20 }) 1174 Row() { 1175 Text(this.getIntegerDigits(this.inSetValueOne)) 1176 .fontSize(52) 1177 .fontColor("#FFFFFFFF") 1178 .fontWeight(700) 1179 .textAlign(TextAlign.Start) 1180 .margin({ left: 20 }) 1181 Text('%') 1182 .fontSize(19) 1183 .fontColor("#FFFFFFFF") 1184 .fontWeight(500) 1185 .textAlign(TextAlign.Start) 1186 .margin({ left: 2 }) 1187 } 1188 }.alignItems(HorizontalAlign.Start) 1189 } 1190 .width(233) 1191 .height(233) 1192 .borderRadius(116.5) 1193 .backgroundColor(Color.Black) 1194 } 1195 } 1196 }.width('100%') 1197 } 1198} 1199``` 1200 1201 1202 1203 1204### Example 5: Setting the Slider Prefix and Suffix 1205 1206This example demonstrates how to set the prefix and suffix of the slider using **prefix** and **suffix**, defining their custom content and accessibility configuration. After the accessibility configuration is specified, the screen reader announces the accessibility text accordingly. 1207 1208```ts 1209// xxx.ets 1210import { ComponentContent } from '@kit.ArkUI'; 1211 1212class NodeParams { 1213 param: ResourceStr = "" 1214 1215 constructor(param: ResourceStr) { 1216 this.param = param; 1217 } 1218} 1219 1220@Builder 1221function textBuilder(params: NodeParams) { 1222 Text(params.param) 1223 .fontSize($r('sys.float.Caption_L')) 1224 .clip(true) 1225 .textAlign(TextAlign.Center) 1226 .fontColor(Color.Black) 1227} 1228 1229@Entry 1230@Component 1231struct SliderExample { 1232 private pre: string = 'Low'; 1233 private suf: string = 'High'; 1234 private uiContext: UIContext = this.getUIContext(); 1235 1236 private preNode1: ComponentContent<NodeParams> = new ComponentContent(this.uiContext, wrapBuilder(textBuilder), new NodeParams(this.pre)); 1237 private sufNode1: ComponentContent<NodeParams> = new ComponentContent(this.uiContext, wrapBuilder(textBuilder), new NodeParams(this.suf)); 1238 private preNode2: ComponentContent<NodeParams> = new ComponentContent(this.uiContext, wrapBuilder(textBuilder), new NodeParams(this.pre)); 1239 private sufNode2: ComponentContent<NodeParams> = new ComponentContent(this.uiContext, wrapBuilder(textBuilder), new NodeParams(this.suf)); 1240 private preNode3: ComponentContent<NodeParams> = new ComponentContent(this.uiContext, wrapBuilder(textBuilder), new NodeParams(this.pre)); 1241 private sufNode3: ComponentContent<NodeParams> = new ComponentContent(this.uiContext, wrapBuilder(textBuilder), new NodeParams(this.suf)); 1242 private preNode4: ComponentContent<NodeParams> = new ComponentContent(this.uiContext, wrapBuilder(textBuilder), new NodeParams(this.pre)); 1243 private sufNode4: ComponentContent<NodeParams> = new ComponentContent(this.uiContext, wrapBuilder(textBuilder), new NodeParams(this.suf)); 1244 private preNode5: ComponentContent<NodeParams> = new ComponentContent(this.uiContext, wrapBuilder(textBuilder), new NodeParams(this.pre)); 1245 private sufNode5: ComponentContent<NodeParams> = new ComponentContent(this.uiContext, wrapBuilder(textBuilder), new NodeParams(this.suf)); 1246 private preNode6: ComponentContent<NodeParams> = new ComponentContent(this.uiContext, wrapBuilder(textBuilder), new NodeParams(this.pre)); 1247 private sufNode6: ComponentContent<NodeParams> = new ComponentContent(this.uiContext, wrapBuilder(textBuilder), new NodeParams(this.suf)); 1248 1249 build() { 1250 Column({ space: 8 }) { 1251 Text('outset slider').fontSize(9).fontColor(0xCCCCCC).width('90%').margin(15) 1252 Row() { 1253 Slider({ 1254 value: 50, 1255 min: 0, 1256 max: 100, 1257 style: SliderStyle.OutSet 1258 }) 1259 .showTips(true) 1260 .prefix(this.preNode1) 1261 .suffix(this.sufNode1) 1262 } 1263 .width('80%') 1264 1265 Row() { 1266 Slider({ 1267 value: 50, 1268 min: 0, 1269 max: 100, 1270 style: SliderStyle.OutSet 1271 }) 1272 .showTips(true) 1273 .prefix(this.preNode3) 1274 } 1275 .width('80%') 1276 1277 Row() { 1278 Slider({ 1279 value: 50, 1280 min: 0, 1281 max: 100, 1282 style: SliderStyle.OutSet 1283 }) 1284 .showTips(true) 1285 .suffix(this.sufNode3) 1286 } 1287 .width('80%') 1288 1289 Text('inset slider').fontSize(9).fontColor(0xCCCCCC).width('90%').margin(15) 1290 Row() { 1291 Slider({ 1292 value: 50, 1293 min: 0, 1294 max: 100, 1295 style: SliderStyle.InSet 1296 }) 1297 .blockColor('#191970') 1298 .trackColor('#ADD8E6') 1299 .selectedColor('#4169E1') 1300 .showTips(true) 1301 .trackThickness(36) 1302 .prefix(this.preNode2) 1303 .suffix(this.sufNode2) 1304 } 1305 .width('80%') 1306 1307 Row() { 1308 Slider({ 1309 value: 50, 1310 min: 0, 1311 max: 100, 1312 style: SliderStyle.InSet 1313 }) 1314 .blockColor('#191970') 1315 .trackColor('#ADD8E6') 1316 .selectedColor('#4169E1') 1317 .showTips(true) 1318 .trackThickness(36) 1319 .prefix(this.preNode4) 1320 } 1321 .width('80%') 1322 1323 Row() { 1324 Slider({ 1325 value: 50, 1326 min: 0, 1327 max: 100, 1328 style: SliderStyle.InSet 1329 }) 1330 .blockColor('#191970') 1331 .trackColor('#ADD8E6') 1332 .selectedColor('#4169E1') 1333 .showTips(true) 1334 .trackThickness(36) 1335 .suffix(this.sufNode4) 1336 } 1337 .width('80%') 1338 1339 Text('slider Show Step').fontSize(9).fontColor(0xCCCCCC).width('90%').margin(15) 1340 Row() { 1341 Slider({ 1342 value: 50, 1343 min: 0, 1344 max: 100, 1345 step:10, 1346 style: SliderStyle.InSet 1347 }) 1348 .blockColor('#191970') 1349 .trackColor('#ADD8E6') 1350 .selectedColor('#4169E1') 1351 .showTips(true) 1352 .trackThickness(36) 1353 .showSteps(true) 1354 .prefix(this.preNode5, { 1355 accessibilityText: 'prefixText', 1356 accessibilityDescription: 'prefixDescription', 1357 accessibilityLevel: 'auto', 1358 accessibilityGroup: true 1359 }) 1360 .suffix(this.sufNode5, { 1361 accessibilityText: 'suffixText', 1362 accessibilityDescription: 'suffixDescription', 1363 accessibilityLevel: 'auto', 1364 accessibilityGroup: true 1365 }) 1366 } 1367 .width('80%') 1368 1369 Row() { 1370 Slider({ 1371 value: 50, 1372 min: 0, 1373 max: 100, 1374 step:10, 1375 style: SliderStyle.InSet 1376 }) 1377 .blockColor('#191970') 1378 .trackColor('#ADD8E6') 1379 .selectedColor('#4169E1') 1380 .showTips(true) 1381 .trackThickness(36) 1382 .showSteps(true) 1383 .prefix(this.preNode6, { 1384 accessibilityText: 'prefixText', 1385 accessibilityDescription: 'prefixDescription', 1386 accessibilityLevel: 'auto', 1387 accessibilityGroup: true 1388 }) 1389 } 1390 .width('80%') 1391 1392 Row() { 1393 Slider({ 1394 value: 50, 1395 min: 0, 1396 max: 100, 1397 step:10, 1398 style: SliderStyle.InSet 1399 }) 1400 .blockColor('#191970') 1401 .trackColor('#ADD8E6') 1402 .selectedColor('#4169E1') 1403 .showTips(true) 1404 .trackThickness(36) 1405 .showSteps(true) 1406 .suffix(this.sufNode6, { 1407 accessibilityText: 'suffixText', 1408 accessibilityDescription: 'suffixDescription', 1409 accessibilityLevel: 'auto', 1410 accessibilityGroup: true 1411 }) 1412 } 1413 .width('80%') 1414 }.width('100%') 1415 } 1416} 1417``` 1418 1419 1420 1421 1422### Example 6: Setting Accessibility Text for Slider Step Markers 1423 1424This example demonstrates how to set accessibility text for step markers in a **Slider** component using **showSteps**. The screen reader announces the set accessibility text accordingly. 1425 1426```ts 1427 1428class SliderBlockBorderColorModifier1 implements AttributeModifier<SliderAttribute>{ 1429 optionMaps:Map<number, SliderStepItemAccessibility> = new Map() 1430 .set(1, {text : "123123"}) 1431 .set(2, {text : "Slider accessibility text"}) 1432 .set(3, {text : $r('app.string.stepItemText')}) 1433 .set(4, {text : "!@#$%^&*()"}); 1434 applyNormalAttribute(instance: SliderAttribute): void { 1435 instance.showSteps(true, {stepsAccessibility: this.optionMaps}) 1436 } 1437} 1438@Entry 1439@Component 1440struct SliderExample { 1441 @State show: boolean = true; 1442 @State optionMaps:Map<number, SliderStepItemAccessibility> = new Map(); 1443 private sliderModifier: SliderBlockBorderColorModifier1 =new SliderBlockBorderColorModifier1() 1444 aboutToAppear(){ 1445 this.optionMaps.set(1, {text : "123123"}) 1446 this.optionMaps.set(2, {text : "Slider accessibility text"}) 1447 this.optionMaps.set(3, {text : $r('app.string.app_name')}) 1448 this.optionMaps.set(4, {text : "!@#$%^&*()"}) 1449 this.show = true; 1450 } 1451 build() { 1452 Column({ space: 8 }) { 1453 Text("show steps").fontSize(12).fontColor(0xCCCCCC).margin(15).width('90%') 1454 Row() { 1455 Slider({ 1456 style: SliderStyle.InSet, 1457 value: 20, 1458 step: 10, 1459 max: 50, 1460 min: 0, 1461 direction: Axis.Horizontal 1462 }) 1463 .stepSize(8) 1464 .stepColor(Color.Yellow) 1465 .showSteps(true, {stepsAccessibility: this.optionMaps}) 1466 } .width('80%').height(300) 1467 Divider() 1468 Text("modifier").fontSize(12).fontColor(0xCCCCCC).margin(15).width('90%') 1469 Row() { 1470 Slider({ 1471 style: SliderStyle.InSet, 1472 value: 20, 1473 step: 10, 1474 max: 50, 1475 min: 0, 1476 direction: Axis.Horizontal 1477 }) 1478 .stepSize(8) 1479 .stepColor(Color.Yellow) 1480 .attributeModifier(this.sliderModifier) 1481 } .width('80%').height(300) 1482 Divider() 1483 } 1484 } 1485} 1486 1487``` 1488 1489
