1# Slider 2<!--Kit: ArkUI--> 3<!--Subsystem: ArkUI--> 4<!--Owner: @liyi0309--> 5<!--Designer: @liyi0309--> 6<!--Tester: @lxl007--> 7<!--Adviser: @HelloCrease--> 8 9滑动条组件，通常用于快速调节设置值，如音量调节、亮度调节等应用场景。 10 11> **说明：** 12> 13> 该组件从API version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 14 15 16## 子组件 17 18无 19 20 21## 接口 22 23Slider(options?: SliderOptions) 24 25**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 26 27**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 28 29**系统能力：** SystemCapability.ArkUI.ArkUI.Full 30 31**参数：** 32 33| 参数名 | 类型 | 必填 | 说明 | 34| ------- | --------------------------------------- | ---- | ------------------ | 35| options | [SliderOptions](#slideroptions对象说明) | 否 | 配置滑动条的参数。 | 36 37## SliderOptions对象说明 38 39滑动条的信息。 40 41**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 42 43**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 44 45**系统能力：** SystemCapability.ArkUI.ArkUI.Full 46 47| 名称 | 类型 | 只读 | 可选 | 说明 | 48| -------- | -------- | -------- | -------- | -------- | 49| value | number | 否 | 是 | 当前进度值。<br/>默认值：与参数min的取值一致。<br />从API version 10开始，该参数支持[$$](../../../ui/state-management/arkts-two-way-sync.md)双向绑定变量。<br />该参数支持[!!](../../../ui/state-management/arkts-new-binding.md#系统组件参数双向绑定)双向绑定变量。<br/>取值范围： [min, max]<br/>小于min时取min，大于max时取max。<br/>$$运算符为系统组件提供TS变量的引用，使得TS变量和slider组件的value值保持同步。详细使用示例请参考[示例7设置滑动条的双向绑定](#示例7设置滑动条的双向绑定)。 | 50| min | number | 否 | 是 | 设置最小值。<br/>默认值：0 | 51| max | number | 否 | 是 | 设置最大值。<br/>默认值：100<br/>**说明：** <br/>min >= max异常情况，min取默认值0，max取默认值100。<br/>value不在[min, max]范围之内，取min或者max，靠近min取min，靠近max取max。 | 52| step | number | 否 | 是 | 设置Slider滑动步长。<br/>默认值：1<br/>取值范围：[0.01, max - min]<br/>**说明：** <br/>若设置的step值小于0或大于max值，则按默认值显示。 | 53| style | [SliderStyle](#sliderstyle枚举说明) | 否 | 是 | 设置Slider的滑块与滑轨显示样式。<br/>默认值：SliderStyle.OutSet | 54| direction<sup>8+</sup> | [Axis](ts-appendix-enums.md#axis) | 否 | 是 | 设置滑动条滑动方向为水平或竖直方向。<br/>默认值：Axis.Horizontal | 55| reverse<sup>8+</sup> | boolean | 否 | 是 | 设置滑动条取值范围是否反向。<br/>默认值：false<br/>值为true时，横向Slider从右往左滑动，竖向Slider从下往上滑动。值为false时，横向Slider从左往右滑动，竖向Slider从上往下滑动。 | 56 57## SliderStyle枚举说明 58 59滑动条滑块在滑轨上显示的样式。 60 61**系统能力：** SystemCapability.ArkUI.ArkUI.Full 62 63| 名称 | 说明 | 64| -------- | -------- | 65| OutSet | 滑块在滑轨上。<br/>**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 66| InSet | 滑块在滑轨内。<br/>**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 67| NONE<sup>12+</sup> | 无滑块 <br/>**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 68 69> **说明：** 70> 71> - Slider无默认padding。 72> - 当Slider为水平滑动条时，默认高度为40vp，宽度为父容器的宽度，滑动条居中显示，当滑动条的style为SliderStyle.OutSet时，左右间距分别为9vp，即为[blockSize](#blocksize10)宽度的一半，当滑动条的style为SliderStyle.InSet时，左右间距分别为6vp，若设置padding，padding不会覆盖左右间距。 73> - 当Slider为竖直滑动条时，默认宽度为40vp，高度为父容器的高度，滑动条居中显示，当滑动条的style为SliderStyle.OutSet时，上下间距分别为10vp，当滑动条的style为SliderStyle.InSet时，上下间距分别为6vp，若设置padding，padding不会覆盖上下间距。 74 75## 属性 76 77支持除触摸热区以外的[通用属性](ts-component-general-attributes.md)。 78 79### blockColor 80 81blockColor(value: ResourceColor) 82 83设置滑块的颜色。 84 85当滑块形状设置为SliderBlockType.DEFAULT时，blockColor可设置默认圆形滑块颜色。 86 87当滑块形状设置为SliderBlockType.IMAGE时，滑块无填充，设置blockColor不生效。 88 89当滑块形状设置为SliderBlockType.SHAPE时，blockColor可设置自定义形状的填充颜色。 90 91**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 92 93**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 94 95**系统能力：** SystemCapability.ArkUI.ArkUI.Full 96 97**参数：** 98 99| 参数名 | 类型 | 必填 | 说明 | 100| ------ | ------------------------------------------ | ---- | ----------------------------------- | 101| value | [ResourceColor](ts-types.md#resourcecolor) | 是 | 滑块的颜色。 <br/>默认值：`$r('sys.color.ohos_id_color_foreground_contrary')` | 102 103### trackColor 104 105trackColor(value: ResourceColor | LinearGradient) 106 107设置滑轨的背景颜色。 108 109从API version 12开始支持利用LinearGradient设置滑轨的渐变色。 110 111**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 112 113**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 114 115**系统能力：** SystemCapability.ArkUI.ArkUI.Full 116 117**参数：** 118 119| 参数名 | 类型 | 必填 | 说明 | 120| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 121| value | [ResourceColor](ts-types.md#resourcecolor) \| [LinearGradient<sup>12+</sup>](ts-basic-components-datapanel.md#lineargradient10) | 是 | 滑轨的背景颜色。<br/>**说明：** <br/>设置渐变色时，如果颜色断点颜色值为非法值或渐变色断点为空，渐变色将不起效果。默认值：`$r('sys.color.ohos_id_color_component_normal')`。注意：该接口中的LinearGradient类型不支持在原子化服务中使用。 | 122 123### selectedColor 124 125selectedColor(value: ResourceColor) 126 127设置滑轨的已滑动部分颜色。 128 129**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 130 131**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 132 133**系统能力：** SystemCapability.ArkUI.ArkUI.Full 134 135**参数：** 136 137| 参数名 | 类型 | 必填 | 说明 | 138| ------ | ------------------------------------------ | ---- | ------------------------------------------------------------ | 139| value | [ResourceColor](ts-types.md#resourcecolor) | 是 | 滑轨的已滑动部分颜色。 <br/>**说明：** <br/>设置渐变色时，如果颜色断点颜色值为非法值或渐变色断点为空，渐变色将不起效果。默认值：`$r('sys.color.ohos_id_color_emphasize')` | 140 141### selectedColor<sup>18+</sup> 142 143selectedColor(selectedColor: ResourceColor | LinearGradient) 144 145设置滑轨的已滑动部分颜色。与[selectedColor](#selectedcolor)相比，新增了LinearGradient类型的支持。 146 147从API version 18开始支持利用LinearGradient设置滑轨的已滑动部分的渐变色。 148 149**卡片能力：** 从API version 18开始，该接口支持在ArkTS卡片中使用。 150 151**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 152 153**系统能力：** SystemCapability.ArkUI.ArkUI.Full 154 155**参数：** 156 157| 参数名 | 类型 | 必填 | 说明 | 158| ------------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 159| selectedColor | [ResourceColor](ts-types.md#resourcecolor) \| [LinearGradient<sup>18+</sup>](ts-basic-components-datapanel.md#lineargradient10) | 是 | 滑轨的已滑动部分颜色。 <br/>**说明：** <br/>设置渐变色时，若颜色断点颜色值为非法值或者渐变色断点为空时，渐变色不起效果。 <br/>默认值：`$r('sys.color.ohos_id_color_emphasize')` | 160 161### showSteps 162 163showSteps(value: boolean) 164 165设置当前是否显示步长刻度值。 166 167**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 168 169**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 170 171**系统能力：** SystemCapability.ArkUI.ArkUI.Full 172 173**参数：** 174 175| 参数名 | 类型 | 必填 | 说明 | 176| ------ | ------- | ---- | ------------------------------------------ | 177| value | boolean | 是 | 当前是否显示步长刻度值。值为true时显示刻度值，值为false时不显示刻度值。<br/>默认值：false | 178 179### showTips 180 181showTips(value: boolean, content?: ResourceStr) 182 183设置滑动时是否显示气泡提示。 184 185当direction的值为Axis.Horizontal时，tip显示在滑块上方，如果上方空间不够，则在下方显示。当值为Axis.Vertical时，tip显示在滑块左边，如果左边空间不够，则在右边显示。当不设置周边边距或者周边边距比较小时，tip会被截断。 186 187tip的绘制区域为Slider自身节点的overlay。 188 189**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 190 191**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 192 193**系统能力：** SystemCapability.ArkUI.ArkUI.Full 194 195**参数：** 196 197| 参数名 | 类型 | 必填 | 说明 | 198| --------------------- | -------------------------------------- | ---- | ------------------------------------------ | 199| value | boolean | 是 | 滑动时是否显示气泡提示。值为true时显示气泡。值为false时不显示气泡。<br/>默认值：false | 200| content<sup>10+</sup> | [ResourceStr](ts-types.md#resourcestr) | 否 | 气泡提示的文本内容，默认显示当前百分比。 | 201 202### trackThickness<sup>8+</sup> 203 204trackThickness(value: Length) 205 206设置滑轨的粗细。设置小于等于0的值时，取默认值。 207 208为保证滑块和滑轨的[SliderStyle](#sliderstyle枚举说明)样式，[blockSize](#blocksize10)跟随trackThickness同比例增减。 209 210当style为[SliderStyle](#sliderstyle枚举说明).OutSet时，trackThickness ：[blockSize](#blocksize10) = 1 ：4，当style为[SliderStyle](#sliderstyle枚举说明).InSet时，trackThickness ：[blockSize](#blocksize10) = 5 ：3。 211 212trackThickness或[blockSize](#blocksize10)的大小超过Slider组件的宽度或高度时，取默认值。 213 214当[SliderStyle](#sliderstyle枚举说明)设置为OutSet时，尽管trackThickness的大小没超过Slider组件的宽度或高度，但是[blockSize](#blocksize10)超过了，取默认值。 215 216**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 217 218**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 219 220**系统能力：** SystemCapability.ArkUI.ArkUI.Full 221 222**参数：** 223 224| 参数名 | 类型 | 必填 | 说明 | 225| ------ | ---------------------------- | ---- | ------------------------------------------------------------ | 226| value | [Length](ts-types.md#length) | 是 | 滑轨的粗细。<br/>默认值：当参数style的值设置[SliderStyle](#sliderstyle枚举说明).OutSet 时为 4.0vp，[SliderStyle](#sliderstyle枚举说明).InSet时为20.0vp。 | 227 228### blockBorderColor<sup>10+</sup> 229 230blockBorderColor(value: ResourceColor) 231 232设置滑块描边颜色。 233 234当滑块形状设置为SliderBlockType.DEFAULT时，blockBorderColor可设置默认圆形滑块描边颜色。 235 236当滑块形状设置为SliderBlockType.IMAGE时，滑块无描边，设置blockBorderColor不生效。 237 238当滑块形状设置为SliderBlockType.SHAPE时，blockBorderColor可设置自定义形状中线的颜色。 239 240**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 241 242**系统能力：** SystemCapability.ArkUI.ArkUI.Full 243 244**参数：** 245 246| 参数名 | 类型 | 必填 | 说明 | 247| ------ | ------------------------------------------ | ---- | -------------------------------------- | 248| value | [ResourceColor](ts-types.md#resourcecolor) | 是 | 滑块描边颜色。<br/>默认值：'#00000000' | 249 250### blockBorderWidth<sup>10+</sup> 251 252blockBorderWidth(value: Length) 253 254设置滑块描边粗细。 255 256当滑块形状设置为SliderBlockType.DEFAULT时，blockBorderWidth可设置默认圆形滑块描边粗细。 257 258当滑块形状设置为SliderBlockType.IMAGE时，滑块无描边，设置blockBorderWidth不生效。 259 260当滑块形状设置为SliderBlockType.SHAPE时，blockBorderWidth可设置自定义形状中线的粗细。 261 262**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 263 264**系统能力：** SystemCapability.ArkUI.ArkUI.Full 265 266**参数：** 267 268| 参数名 | 类型 | 必填 | 说明 | 269| ------ | ---------------------------- | ---- | -------------- | 270| value | [Length](ts-types.md#length) | 是 | 滑块描边粗细。<br/>**说明：** <br/>设置string类型时，不支持百分比。 | 271 272### stepColor<sup>10+</sup> 273 274stepColor(value: ResourceColor) 275 276设置刻度颜色。 277 278**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 279 280**系统能力：** SystemCapability.ArkUI.ArkUI.Full 281 282**参数：** 283 284| 参数名 | 类型 | 必填 | 说明 | 285| ------ | ------------------------------------------ | ---- | ---------------------------------- | 286| value | [ResourceColor](ts-types.md#resourcecolor) | 是 | 刻度颜色。<br/>默认值：<br/>`$r('sys.color.ohos_id_color_foreground')`混合<br/>`$r('sys.color.ohos_id_alpha_normal_bg')`透明度的颜色 | 287 288### trackBorderRadius<sup>10+</sup> 289 290trackBorderRadius(value: Length) 291 292设置底板圆角半径。 293 294**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 295 296**系统能力：** SystemCapability.ArkUI.ArkUI.Full 297 298**参数：** 299 300| 参数名 | 类型 | 必填 | 说明 | 301| ------ | ---------------------------- | ---- | -------------------------------- | 302| value | [Length](ts-types.md#length) | 是 | 底板圆角半径。<br/>默认值：<br/>style值为SliderStyle.OutSet时默认值为'2vp'。<br/>style值为SliderStyle.InSet时默认值为'10vp'。<br/>**说明：** <br/>设置string类型时，不支持百分比。设定值小于0时取默认值。 | 303 304### selectedBorderRadius<sup>12+</sup> 305 306selectedBorderRadius(value: Dimension) 307 308设置已滑动部分（高亮）圆角半径。 309 310**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 311 312**系统能力：** SystemCapability.ArkUI.ArkUI.Full 313 314**参数：** 315 316| 参数名 | 类型 | 必填 | 说明 | 317| ------ | ---------------------------- | ---- | -------------------------------- | 318| value | [Dimension](ts-types.md#dimension10)| 是 | 已选择部分的圆角半径。<br/>默认值：当style值为SliderStyle.InSet或SliderStyle.OutSet时，跟随底板圆角；当style值为SliderStyle.NONE时，为0。<br/>**说明：** <br/>不支持Percentage类型。设定值小于0时取默认值。 | 319 320### blockSize<sup>10+</sup> 321 322blockSize(value: SizeOptions) 323 324设置滑块大小。 325 326当滑块形状设置为SliderBlockType.DEFAULT时，取宽高的最小值作为圆形半径。 327 328当滑块形状设置为SliderBlockType.IMAGE时，用于设置图片的尺寸大小，图片采用ObjectFit.Cover策略进行缩放。 329 330当滑块形状设置为SliderBlockType.SHAPE时，用于设置自定义形状的大小，自定义形状也会采用ObjectFit.Cover策略进行缩放。 331 332**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 333 334**系统能力：** SystemCapability.ArkUI.ArkUI.Full 335 336**参数：** 337 338| 参数名 | 类型 | 必填 | 说明 | 339| ------ | -------------------------------------- | ---- | ------------------------------------------------------------ | 340| value | [SizeOptions](ts-types.md#sizeoptions) | 是 | 滑块大小。<br/>默认值：当参数style的值设置为[SliderStyle](#sliderstyle枚举说明).OutSet时为{width: 18, height: 18}，当参数style的值设置为[SliderStyle](#sliderstyle枚举说明).InSet时为{width: 12, height: 12}，当参数style的值设置为[SliderStyle](#sliderstyle枚举说明).NONE时为，此字段不生效。<br/>当设置的blockSize的宽高值不相等时，取较小值的尺寸，当设置的宽高值中有一个或两个都小于等于0的时候，取默认值。 | 341 342### blockStyle<sup>10+</sup> 343 344blockStyle(value: SliderBlockStyle) 345 346设置滑块形状参数。 347 348**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 349 350**系统能力：** SystemCapability.ArkUI.ArkUI.Full 351 352**参数：** 353 354| 参数名 | 类型 | 必填 | 说明 | 355| ------ | ----------------------------------------------- | ---- | ------------------------------------------------------------ | 356| value | [SliderBlockStyle](#sliderblockstyle10对象说明) | 是 | 滑块形状参数。<br/>默认值：SliderBlockType.DEFAULT，滑块形状为圆形。 | 357 358### stepSize<sup>10+</sup> 359 360stepSize(value: Length) 361 362设置刻度大小（直径）。当值为0时，刻度点不显示，当值小于0时，取默认值。 363 364**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 365 366**系统能力：** SystemCapability.ArkUI.ArkUI.Full 367 368**参数：** 369 370| 参数名 | 类型 | 必填 | 说明 | 371| ------ | ---------------------------- | ---- | ------------------------------------- | 372| value | [Length](ts-types.md#length) | 是 | 刻度大小（直径）。 <br/>默认值：'4vp'<br/>取值范围：[0, [trackThickness](#trackthickness8)) | 373 374### minLabel<sup>(deprecated)</sup> 375 376minLabel(value: string) 377 378设置最小值。 379 380从API Version 9开始废弃，使用min替代。 381 382**系统能力：** SystemCapability.ArkUI.ArkUI.Full 383 384**参数：** 385 386| 参数名 | 类型 | 必填 | 说明 | 387| ------ | ------ | ---- | -------- | 388| value | string | 是 | 最小值。 | 389 390### maxLabel<sup>(deprecated)</sup> 391 392maxLabel(value: string) 393 394设置最大值。 395 396从API Version 9开始废弃，使用max替代。 397 398**系统能力：** SystemCapability.ArkUI.ArkUI.Full 399 400**参数：** 401 402| 参数名 | 类型 | 必填 | 说明 | 403| ------ | ------ | ---- | -------- | 404| value | string | 是 | 最大值。 | 405 406### sliderInteractionMode<sup>12+</sup> 407 408sliderInteractionMode(value: SliderInteraction) 409 410设置用户与滑动条组件交互方式。 411 412**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 413 414**系统能力：** SystemCapability.ArkUI.ArkUI.Full 415 416**参数：** 417 418| 参数名 | 类型 | 必填 | 说明 | 419| ------ | ------------------------------------------------- | ---- | ------------------------------------------------------------ | 420| value | [SliderInteraction](#sliderinteraction12枚举说明) | 是 | 用户与滑动条组件交互方式。 <br /> 默认值：SliderInteraction.SLIDE_AND_CLICK。 | 421 422### minResponsiveDistance<sup>12+</sup> 423 424minResponsiveDistance(value: number) 425 426设置滑动响应的最小距离。 427 428**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 429 430**系统能力：** SystemCapability.ArkUI.ArkUI.Full 431 432**参数：** 433 434| 参数名 | 类型 | 必填 | 说明 | 435| ------ | ------- | ---- | ------------------------------------------ | 436| value | number | 是 | 设置滑动响应的最小距离，滑动超过此距离后滑块才开始滑动。<br/>**说明：** <br/>单位与参数[min](#slideroptions对象说明)和[max](#slideroptions对象说明)一致。<br/>当value小于0、大于MAX-MIN或非法值时，取默认值。<br/>默认值：0 | 437 438### contentModifier<sup>12+</sup> 439 440contentModifier(modifier: ContentModifier\<SliderConfiguration>) 441 442定制Slider内容区的方法。 443 444**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 445 446**系统能力：** SystemCapability.ArkUI.ArkUI.Full 447 448**参数：** 449 450| 参数名 | 类型 | 必填 | 说明 | 451| ------ | --------------------------------------------- | ---- | ------------------------------------------------ | 452| modifier | [ContentModifier\<SliderConfiguration>](#sliderconfiguration12对象说明) | 是 | 在Slider组件上，定制内容区的方法。<br/>modifier：内容修改器，开发者需要自定义class实现ContentModifier接口。 | 453 454> **说明：** 455> 456> - 设置了contentModifier后，自定义区域内点击和手势滑动均不会触发原Slider组件的onChange事件。 457> - 仅当调用triggerChange函数且传递正确的参数值时，才可以触发原Slider组件的onChange事件。 458 459### slideRange<sup>12+</sup> 460 461slideRange(value: SlideRange) 462 463设置有效滑动区间。 464 465**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 466 467**系统能力：** SystemCapability.ArkUI.ArkUI.Full 468 469**参数：** 470 471| 参数名 | 类型 | 必填 | 说明 | 472| ------ | ----------------------------------- | ---- | ---------------- | 473| value | [SlideRange](#sliderange12对象说明) | 是 | 设置有效滑动区间 | 474 475### enableHapticFeedback<sup>18+</sup> 476 477enableHapticFeedback(enabled: boolean) 478 479设置是否开启触控反馈。 480 481开启触控反馈时，需要在工程的[module.json5](../../../quick-start/module-configuration-file.md)中配置requestPermissions字段开启振动权限，配置如下： 482 483```json 484"requestPermissions": [ 485 { 486 "name": "ohos.permission.VIBRATE" 487 } 488 ] 489``` 490 491**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 492 493**系统能力：** SystemCapability.ArkUI.ArkUI.Full 494 495**参数：** 496 497| 参数名 | 类型 | 必填 | 说明 | 498| ------ | --------------------------------------------- |-----|-------------------------------------------------------------------------------------| 499| enabled | boolean | 是 | 设置是否开启触控反馈。<br/>默认值：true，true表示开启触控反馈，false表示不开启触控反馈。| 500 501### digitalCrownSensitivity<sup>18+</sup> 502 503digitalCrownSensitivity(sensitivity: Optional\<CrownSensitivity>) 504 505设置旋转表冠的灵敏度。 506 507**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 508 509**系统能力：** SystemCapability.ArkUI.ArkUI.Full 510 511**参数：** 512 513| 参数名 | 类型 | 必填 | 说明 | 514| ----------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------- | 515| sensitivity | [Optional\<CrownSensitivity>](ts-appendix-enums.md#crownsensitivity18) | 是 | 旋转表冠的灵敏度。<br />默认值：CrownSensitivity.MEDIUM | 516 517### prefix<sup>20+</sup> 518 519prefix(content: ComponentContent, options?: SliderPrefixOptions) 520 521设置滑动条的前缀。 522 523**原子化服务API：** 从API version 20开始，该接口支持在原子化服务中使用。 524 525**系统能力：** SystemCapability.ArkUI.ArkUI.Full 526 527**参数：** 528 529| 参数名 | 类型 | 必填 | 说明 | 530| ----------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------- | 531| content | [ComponentContent](../js-apis-arkui-ComponentContent.md) | 是 | 自定义组件内容，用于定义滑块前缀的可视化内容，该内容会显示在滑块的起始位置。 | 532| options | [SliderPrefixOptions](#sliderprefixoptions20) | 否 | 滑块前缀的配置选项，用于设置与无障碍功能相关的属性。 | 533 534### suffix<sup>20+</sup> 535 536suffix(content: ComponentContent, options?: SliderSuffixOptions) 537 538设置滑动条的后缀。 539 540**原子化服务API：** 从API version 20开始，该接口支持在原子化服务中使用。 541 542**系统能力：** SystemCapability.ArkUI.ArkUI.Full 543 544**参数：** 545 546| 参数名 | 类型 | 必填 | 说明 | 547| ----------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------- | 548| content | [ComponentContent](../js-apis-arkui-ComponentContent.md) | 是 | 自定义组件内容，用于定义滑块后缀的可视化内容，该内容会显示在滑块的结束位置。 | 549| options | [SliderSuffixOptions](#slidersuffixoptions20) | 否 | 滑块后缀的配置选项，用于设置与无障碍功能相关的属性。 | 550 551### showSteps<sup>20+</sup> 552 553showSteps(value: boolean, options?: SliderShowStepOptions) 554 555设置当前是否显示步长刻度值。 556 557支持设置每个刻度点的无障碍文本信息，不设置时默认使用当前刻度点的值作为无障碍文本信息。 558 559当显示步长时，设置的刻度点无障碍文本信息生效。 560 561**卡片能力：** 从API version 20开始，该接口支持在ArkTS卡片中使用。 562 563**原子化服务API：** 从API version 20开始，该接口支持在原子化服务中使用。 564 565**系统能力：** SystemCapability.ArkUI.ArkUI.Full 566 567**参数：** 568 569| 参数名 | 类型 | 必填 | 说明 | 570| ----------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------- | 571| value | boolean | 是 | 当前是否显示步长刻度值。值为true时显示刻度值，值为false时不显示刻度值。<br />默认值：false | 572| options | [SliderShowStepOptions](#slidershowstepoptions20) | 否 | 刻度点无障碍文本的配置选项，用于设置与无障碍功能相关的属性。<br/>默认值：null | 573 574## SliderCustomContentOptions<sup>20+</sup> 575 576Slider前后缀组件无障碍信息参数。 577 578**原子化服务API：** 从API version 20开始，该接口支持在原子化服务中使用。 579 580**系统能力：** SystemCapability.ArkUI.ArkUI.Full 581 582| 名称 | 类型 | 只读 | 可选 | 说明 | 583| ------------------------ | ----------- | ---- | ------------------------------------------------------------ | ------------------------------------------------------------ | 584| accessibilityText | [ResourceStr](ts-types.md#resourcestr) | 否 | 是 | 用于提供辅助功能的文本，供屏幕阅读器等工具读取，增强无障碍功能。 <br/>默认值："" | 585| accessibilityDescription | [ResourceStr](ts-types.md#resourcestr) | 否 | 是 | 用于提供辅助功能的详细描述，描述滑块前缀或后缀的功能或用途，供屏幕阅读器等工具使用。 <br/>默认值为“单指双击即可执行”。 | 586| accessibilityLevel | string | 否 | 是 | 用于控制某个组件是否可被无障碍辅助服务所识别。<br>支持的值为:<br>"auto"：当前组件会转换为“yes”。<br>"yes"：当前组件可被无障碍辅助服务所识别。<br>"no"：当前组件不可被无障碍辅助服务所识别。<br>"no-hide-descendants"：当前组件及其所有子组件不可被无障碍辅助服务所识别。<br>默认值："auto"。 | 587| accessibilityGroup | boolean | 否 | 是 | 用于标识该元素是否属于一个无障碍的组，帮助屏幕阅读器等工具将相关元素进行分组处理。设置为true时表示该组件及其所有子组件为一整个可以选中的组件，无障碍服务将不再关注其子组件内容；设置为false表示不启用无障碍分组。<br/>默认值：false | 588 589## SliderPrefixOptions<sup>20+</sup> 590 591Slider前缀组件无障碍信息参数。 592 593**原子化服务API：** 从API version 20开始，该接口支持在原子化服务中使用。 594 595**系统能力：** SystemCapability.ArkUI.ArkUI.Full 596 597提供前缀组件的无障碍信息，继承自[SliderCustomContentOptions](#slidercustomcontentoptions20)。 598 599## SliderSuffixOptions<sup>20+</sup> 600 601Slider后缀组件无障碍信息参数。 602 603**原子化服务API：** 从API version 20开始，该接口支持在原子化服务中使用。 604 605**系统能力：** SystemCapability.ArkUI.ArkUI.Full 606 607提供后缀组件的无障碍信息，继承自[SliderCustomContentOptions](#slidercustomcontentoptions20)。 608 609## SliderStepItemAccessibility<sup>20+</sup> 610 611Slider刻度点的无障碍文本信息。 612 613**原子化服务API：** 从API version 20开始，该接口支持在原子化服务中使用。 614 615**系统能力：** SystemCapability.ArkUI.ArkUI.Full 616 617| 名称 | 类型 | 只读 | 可选 | 说明 | 618| ------------------------ | ----------- | ---- | ------------------------------------------------------------ | ------------------------------------------------------------ | 619| text | [ResourceStr](ts-types.md#resourcestr) | 否 | 是 | 用于提供辅助功能的文本，供屏幕阅读器等工具读取，增强无障碍功能。 <br/>默认值："" | 620 621## SliderShowStepOptions<sup>20+</sup> 622 623Slider刻度点的无障碍文本信息映射集。 624 625**原子化服务API：** 从API version 20开始，该接口支持在原子化服务中使用。 626 627**系统能力：** SystemCapability.ArkUI.ArkUI.Full 628 629| 名称 | 类型 | 只读 | 可选 | 说明 | 630| ------------------------ | ----------- | ---- | ------------------------------------------------------------ | ------------------------------------------------------------ | 631| stepsAccessibility | Map<number, [SliderStepItemAccessibility](#sliderstepitemaccessibility20)> | 否 | 是 | 用于设置刻度点提供辅助功能文本，供屏幕阅读器等工具读取，增强无障碍功能。 <br/>Key取值范围：[0, INT32_MAX]，当Key设定为负数和小数时，设定项不生效。 <br/>默认值：{} | 632 633## SliderBlockStyle<sup>10+</sup>对象说明 634 635Slider组件滑块形状参数。 636 637**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 638 639**系统能力：** SystemCapability.ArkUI.ArkUI.Full 640 641| 名称 | 类型 | 只读 | 可选 | 说明 | 642| ----- | ------------------------------------------------------------ | ---- | ---- | ------------------------------------------------------------ | 643| type | [SliderBlockType](#sliderblocktype10枚举说明) | 否 | 否 | 设置滑块形状。<br/>默认值：SliderBlockType.DEFAULT，使用圆形滑块。 | 644| image | [ResourceStr](ts-types.md#resourcestr) | 否 | 是 | 设置滑块图片资源。<br />图片显示区域大小由blockSize属性控制，请勿输入尺寸过大的图片。 | 645| 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) | 否 | 是 | 设置滑块使用的自定义形状。 | 646 647## SliderBlockType<sup>10+</sup>枚举说明 648 649Slider组件滑块形状枚举。 650 651**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 652 653**系统能力：** SystemCapability.ArkUI.ArkUI.Full 654 655| 名称 | 值 | 说明 | 656| ------- | -- | ---------------------- | 657| DEFAULT | 0 | 使用默认滑块（圆形）。 | 658| IMAGE | 1 | 使用图片资源作为滑块。 | 659| SHAPE | 2 | 使用自定义形状作为滑块。 | 660 661## SliderInteraction<sup>12+</sup>枚举说明 662 663用户与滑动条组件交互方式。 664 665**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 666 667**系统能力：** SystemCapability.ArkUI.ArkUI.Full 668 669| 名称 | 值 |说明 | 670| ------ | -- | ----------------------------- | 671| SLIDE_AND_CLICK | 0 | 用户可拖拽滑块或者点击滑轨使滑块移动，鼠标或手指按下即发生移动。| 672| SLIDE_ONLY | 1 | 禁止用户通过点击滑轨使滑块移动。| 673| SLIDE_AND_CLICK_UP | 2 |用户可拖拽滑块或者点击滑轨使滑块移动，当鼠标或手指抬起时，若与屏幕按压位置一致，则触发移动。| 674 675## SlideRange<sup>12+</sup>对象说明 676 677定义SlideRange中使用的回调类型。 678 679**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 680 681**系统能力：** SystemCapability.ArkUI.ArkUI.Full 682 683| 名称 | 类型 | 只读 | 可选 | 说明 | 684|----|--------| ---- |--------------|--------------| 685| from | number | 否 | 是 | 设置有效滑动区间的开始。 | 686| to | number | 否 | 是 | 设置有效滑动区间的结束。 | 687 688> **说明：** 689> 690> - 当前仅当MIN<=from<=to<=MAX时该接口生效(MIN和MAX不依赖于其设置的值，而取决于其实际生效的值)。 691> - 可只设置from或者to，也可以同时设置from和to。 692> - 当接口生效且设置的from处于紧邻的step整数倍的值之间，则from实际取左区间step整数倍的那个值或者MIN作为修正后的值。 693> - 当接口生效且设置的to处于紧邻的step整数倍的值之间，则to实际取右区间step整数倍的那个值或者MAX作为修正后的值。 694> - 在from和to取修正值后， 当value是undefined或null时，其取值与from一致; 当value是数值型且value <= from，则取from; 当value > to，则取to。 695 696## 事件 697 698除支持[通用事件](ts-component-general-events.md)外，还支持以下事件： 699 700### onChange 701 702onChange(callback: (value: number, mode: SliderChangeMode) => void) 703 704Slider拖动或点击时触发事件回调。 705 706Begin和End状态当手势点击时都会触发，Moving和Click状态当value值发生变化时触发。 707 708当连贯动作为拖动动作时，不触发Click状态。 709 710**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 711 712**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 713 714**系统能力：** SystemCapability.ArkUI.ArkUI.Full 715 716**参数：** 717 718| 参数名 | 类型 | 必填 | 说明 | 719| ------ | --------------------------------------------- | ---- | ------------------------------------------------------------ | 720| value | number | 是 | 当前滑动进度值，变化范围为对应步长steps数组。若返回值有小数，可使用number.toFixed()方法将数据处理为预期的精度。 | 721| mode | [SliderChangeMode](#sliderchangemode枚举说明) | 是 | 事件触发的相关状态值。 | 722 723## SliderChangeMode枚举说明 724 725滑块的状态值。包括按下、拖动、离开以及点击滑动条使滑块位置时。 726 727**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 728 729**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 730 731**系统能力：** SystemCapability.ArkUI.ArkUI.Full 732 733| 名称 | 值 | 说明 | 734| -------- | -------- | -------- | 735| Begin | 0 | 手势/鼠标接触或者按下滑块。 | 736| Moving | 1 | 正在拖动滑块过程中。 | 737| End | 2 | 手势/鼠标离开滑块。<br/>**说明：** <br/>异常值恢复成默认值时触发，即value设置小于min或大于max。 | 738| Click<sup>8+</sup> | 3 | 点击滑动条使滑块位置移动。 | 739 740## SliderConfiguration<sup>12+</sup>对象说明 741 742开发者需要自定义class实现ContentModifier接口。继承自[CommonConfiguration](ts-universal-attributes-content-modifier.md#commonconfigurationt)。 743 744**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 745 746**系统能力：** SystemCapability.ArkUI.ArkUI.Full 747 748| 名称 | 类型 | 只读 | 可选 | 说明 | 749| ------ | ------ | ---------------- | ---------------- | ---------------- | 750| value | number | 否 | 否 | 当前进度值。 | 751| min | number | 否 | 否 | 最小值。 | 752| max | number | 否 | 否 | 最大值。 | 753| step | number | 否 | 否 | Slider滑动步长。 | 754| triggerChange | [SliderTriggerChangeCallback](#slidertriggerchangecallback12) | 否 | 否 | 触发Slider变化。 | 755 756## SliderTriggerChangeCallback<sup>12+</sup> 757 758type SliderTriggerChangeCallback = (value: number, mode: SliderChangeMode) => void 759 760定义SliderConfiguration中使用的回调类型。 761 762**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 763 764**系统能力：** SystemCapability.ArkUI.ArkUI.Full 765 766**参数：** 767 768| 参数名 | 类型 | 必填 | 说明 | 769| ------ | ------ | ---------------- | ---------------- | 770| value | number | 是 | 设置当前的进度值。<br/>取值范围：[[min](#slideroptions对象说明)-[max](#slideroptions对象说明)] | 771| mode | [SliderChangeMode](#sliderchangemode枚举说明) | 是 | 设置事件触发的相关状态值。 | 772 773## 示例 774 775### 示例1（滑动条基础样式） 776 777该示例通过配置style、showTips、showSteps控制气泡、刻度值、滑块和滑轨的显示。 778 779```ts 780// xxx.ets 781@Entry 782@Component 783struct SliderExample { 784 @State outSetValueOne: number = 40; 785 @State inSetValueOne: number = 40; 786 @State noneValueOne: number = 40; 787 @State outSetValueTwo: number = 40; 788 @State inSetValueTwo: number = 40; 789 @State vOutSetValueOne: number = 40; 790 @State vInSetValueOne: number = 40; 791 @State vOutSetValueTwo: number = 40; 792 @State vInSetValueTwo: number = 40; 793 794 build() { 795 Column({ space: 8 }) { 796 Text('outset slider').fontSize(9).fontColor(0xCCCCCC).width('90%').margin(15) 797 Row() { 798 Slider({ 799 value: this.outSetValueOne, 800 min: 0, 801 max: 100, 802 style: SliderStyle.OutSet 803 }) 804 .showTips(true) 805 .onChange((value: number, mode: SliderChangeMode) => { 806 this.outSetValueOne = value; 807 console.info('value:' + value + 'mode:' + mode.toString()); 808 }) 809 // toFixed(0)将滑动条返回值处理为整数精度 810 Text(this.outSetValueOne.toFixed(0)).fontSize(12) 811 } 812 .width('80%') 813 Row() { 814 Slider({ 815 value: this.outSetValueTwo, 816 step: 10, 817 style: SliderStyle.OutSet 818 }) 819 .showSteps(true) 820 .onChange((value: number, mode: SliderChangeMode) => { 821 this.outSetValueTwo = value; 822 console.info('value:' + value + 'mode:' + mode.toString()); 823 }) 824 Text(this.outSetValueTwo.toFixed(0)).fontSize(12) 825 } 826 .width('80%') 827 828 Text('inset slider').fontSize(9).fontColor(0xCCCCCC).width('90%').margin(15) 829 Row() { 830 Slider({ 831 value: this.inSetValueOne, 832 min: 0, 833 max: 100, 834 style: SliderStyle.InSet 835 }) 836 .blockColor('#191970') 837 .trackColor('#ADD8E6') 838 .selectedColor('#4169E1') 839 .showTips(true) 840 .onChange((value: number, mode: SliderChangeMode) => { 841 this.inSetValueOne = value; 842 console.info('value:' + value + 'mode:' + mode.toString()); 843 }) 844 Text(this.inSetValueOne.toFixed(0)).fontSize(12) 845 } 846 .width('80%') 847 Row() { 848 Slider({ 849 value: this.inSetValueTwo, 850 step: 10, 851 style: SliderStyle.InSet 852 }) 853 .blockColor('#191970') 854 .trackColor('#ADD8E6') 855 .selectedColor('#4169E1') 856 .showSteps(true) 857 .onChange((value: number, mode: SliderChangeMode) => { 858 this.inSetValueTwo = value; 859 console.info('value:' + value + 'mode:' + mode.toString()); 860 }) 861 Text(this.inSetValueTwo.toFixed(0)).fontSize(12) 862 } 863 .width('80%') 864 865 Text('none slider').fontSize(9).fontColor(0xCCCCCC).width('90%').margin(15) 866 Row() { 867 Slider({ 868 value: this.noneValueOne, 869 min: 0, 870 max: 100, 871 style: SliderStyle.NONE 872 }) 873 .blockColor('#191970') 874 .trackColor('#ADD8E6') 875 .selectedColor('#4169E1') 876 .showTips(true) 877 .onChange((value: number, mode: SliderChangeMode) => { 878 this.noneValueOne = value; 879 console.info('value:' + value + 'mode:' + mode.toString()); 880 }) 881 Text(this.noneValueOne.toFixed(0)).fontSize(12) 882 } 883 .width('80%') 884 885 Row() { 886 Column() { 887 Text('vertical outset slider').fontSize(9).fontColor(0xCCCCCC).width('50%').margin(15) 888 Row() { 889 Text().width('10%') 890 Slider({ 891 value: this.vOutSetValueOne, 892 style: SliderStyle.OutSet, 893 direction: Axis.Vertical 894 }) 895 .blockColor('#191970') 896 .trackColor('#ADD8E6') 897 .selectedColor('#4169E1') 898 .showTips(true) 899 .onChange((value: number, mode: SliderChangeMode) => { 900 this.vOutSetValueOne = value; 901 console.info('value:' + value + 'mode:' + mode.toString()); 902 }) 903 Slider({ 904 value: this.vOutSetValueTwo, 905 step: 10, 906 style: SliderStyle.OutSet, 907 direction: Axis.Vertical 908 }) 909 .blockColor('#191970') 910 .trackColor('#ADD8E6') 911 .selectedColor('#4169E1') 912 .showSteps(true) 913 .onChange((value: number, mode: SliderChangeMode) => { 914 this.vOutSetValueTwo = value; 915 console.info('value:' + value + 'mode:' + mode.toString()); 916 }) 917 } 918 }.width('50%').height(300) 919 920 Column() { 921 Text('vertical inset slider').fontSize(9).fontColor(0xCCCCCC).width('50%').margin(15) 922 Row() { 923 Slider({ 924 value: this.vInSetValueOne, 925 style: SliderStyle.InSet, 926 direction: Axis.Vertical, 927 reverse: true // 竖向的Slider默认是上端是min值，下端是max值，因此想要从下往上滑动，需要设置reverse为true 928 }) 929 .showTips(true) 930 .onChange((value: number, mode: SliderChangeMode) => { 931 this.vInSetValueOne = value; 932 console.info('value:' + value + 'mode:' + mode.toString()); 933 }) 934 Slider({ 935 value: this.vInSetValueTwo, 936 step: 10, 937 style: SliderStyle.InSet, 938 direction: Axis.Vertical, 939 reverse: true 940 }) 941 .showSteps(true) 942 .onChange((value: number, mode: SliderChangeMode) => { 943 this.vInSetValueTwo = value; 944 console.info('value:' + value + 'mode:' + mode.toString()); 945 }) 946 } 947 }.width('50%').height(300) 948 } 949 }.width('100%') 950 } 951} 952``` 953 954 955 956### 示例2（设置滑动条样式） 957 958该示例通过blockBorderColor、blockSize、blockBorderWidth、blockStyle设置滑块的样式，通过stepSize、stepColor设置刻度值的样式，通过trackBorderRadius设置底板的圆角，通过selectedBorderRadius设置已滑动部分的圆角。 959 960```ts 961@Entry 962@Component 963struct SliderExample { 964 @State tipsValue: number = 40; 965 966 build() { 967 Column({ space: 8 }) { 968 Text('block').fontSize(9).fontColor(0xCCCCCC).margin(15).width('90%') 969 Slider({ style: SliderStyle.OutSet, value: 40 }) 970 .blockSize({ width: 40, height: 40 }) 971 .blockBorderColor(Color.Red) 972 .blockBorderWidth(5) 973 Divider() 974 Text('step').fontSize(9).fontColor(0xCCCCCC).margin(15).width('90%') 975 Slider({ style: SliderStyle.InSet, value: 40, step: 10 }) 976 .showSteps(true) 977 .stepSize(8) 978 .stepColor(Color.Yellow) 979 Divider() 980 Text('track').fontSize(9).fontColor(0xCCCCCC).margin(15).width('90%') 981 Slider({ style: SliderStyle.InSet, value: 40 }) 982 .trackBorderRadius(2) 983 Divider() 984 Text('selected').fontSize(9).fontColor(0xCCCCCC).margin(15).width('90%') 985 Slider({ style: SliderStyle.InSet, value: 40 }) 986 .selectedBorderRadius(2) 987 Divider() 988 Text('blockStyle').fontSize(9).fontColor(0xCCCCCC).margin(15).width('90%') 989 Slider({ style: SliderStyle.OutSet, value: 40 }) 990 .blockStyle({ type: SliderBlockType.DEFAULT }) 991 Slider({ style: SliderStyle.OutSet, value: 40 }) 992 .blockStyle({ type: SliderBlockType.IMAGE, image: $r('sys.media.ohos_app_icon') }) 993 Slider({ style: SliderStyle.OutSet, value: 40 }) 994 .blockSize({ width: '60px', height: '60px' }) 995 .blockColor(Color.Red) 996 .blockStyle({ type: SliderBlockType.SHAPE, shape: new Path({ commands: 'M60 60 M30 30 L15 56 L45 56 Z' }) }) 997 Divider() 998 Text('tips').fontSize(9).fontColor(0xCCCCCC).margin(15).width('90%') 999 Slider({ style: SliderStyle.InSet, value: this.tipsValue }) 1000 .showTips(true, this.tipsValue.toFixed()) 1001 .onChange(value => { 1002 this.tipsValue = value; 1003 }) 1004 } 1005 } 1006} 1007``` 1008 1009 1010 1011 1012 1013### 示例3（自定义滑动条） 1014 1015该示例实现了Slider组件通过样式Builder定制内容区。点击增加按钮，进度条会按照原Slider设置的步长增加，反之点减少按钮进度条会减少，并触发原组件的onChange事件。 1016 1017```ts 1018// xxx.ets 1019 1020@Builder 1021function buildSlider(config: SliderConfiguration) { 1022 Row() { 1023 Column({ space: 30 }) { 1024 Progress({ value: config.value, total: config.max, type: ProgressType.Ring }) 1025 .margin({ top: 20 }) 1026 1027 Button('增加') 1028 .onClick(() => { 1029 config.value = config.value + config.step; 1030 config.triggerChange(config.value, SliderChangeMode.Click); 1031 }) 1032 .width(100) 1033 .height(25) 1034 .fontSize(10) 1035 .enabled(config.value < config.max) 1036 1037 Button('减少') 1038 .onClick(() => { 1039 config.value = config.value - config.step; 1040 config.triggerChange(config.value, SliderChangeMode.Click); 1041 }) 1042 .width(100) 1043 .height(25) 1044 .fontSize(10) 1045 .enabled(config.value > config.min) 1046 1047 Slider({ 1048 value: config.value, 1049 min: config.min, 1050 max: config.max, 1051 step: config.step, 1052 }) 1053 .width(100) 1054 .visibility((config.contentModifier as MySliderStyle).showSlider ? Visibility.Visible : Visibility.Hidden) 1055 .showSteps(true) 1056 .onChange((value: number, mode: SliderChangeMode) => { 1057 config.triggerChange(value, mode); 1058 }) 1059 Text('当前状态：' + ((config.contentModifier as MySliderStyle).sliderChangeMode == 0 ? "Begin" 1060 : ((config.contentModifier as MySliderStyle).sliderChangeMode == 1 ? "Moving" 1061 : ((config.contentModifier as MySliderStyle).sliderChangeMode == 2 ? "End" 1062 : ((config.contentModifier as MySliderStyle).sliderChangeMode == 3 ? "Click" : "无"))))) 1063 .fontSize(10) 1064 Text('进度值：' + config.value) 1065 .fontSize(10) 1066 Text('最小值：' + config.min) 1067 .fontSize(10) 1068 Text('最大值：' + config.max) 1069 .fontSize(10) 1070 Text('步长：' + config.step) 1071 .fontSize(10) 1072 } 1073 .width('80%') 1074 1075 } 1076 .width('100%') 1077} 1078 1079class MySliderStyle implements ContentModifier<SliderConfiguration> { 1080 showSlider: boolean = true; 1081 sliderChangeMode: number = 0; 1082 1083 constructor(showSlider: boolean, sliderChangeMode: number) { 1084 this.showSlider = showSlider; 1085 this.sliderChangeMode = sliderChangeMode; 1086 } 1087 1088 applyContent(): WrappedBuilder<[SliderConfiguration]> { 1089 return wrapBuilder(buildSlider); 1090 } 1091} 1092 1093 1094@Entry 1095@Component 1096struct SliderExample { 1097 @State showSlider: boolean = true; 1098 @State sliderValue: number = 0; 1099 @State sliderMin: number = 10; 1100 @State sliderMax: number = 100; 1101 @State sliderStep: number = 20; 1102 @State sliderChangeMode: number = 0; 1103 1104 build() { 1105 Column({ space: 8 }) { 1106 1107 Row() { 1108 Slider({ 1109 value: this.sliderValue, 1110 min: this.sliderMin, 1111 max: this.sliderMax, 1112 step: this.sliderStep, 1113 }) 1114 .showSteps(true) 1115 .onChange((value: number, mode: SliderChangeMode) => { 1116 this.sliderValue = value; 1117 this.sliderChangeMode = mode; 1118 console.info('【SliderLog】value:' + value + 'mode:' + mode.toString()); 1119 }) 1120 .contentModifier(new MySliderStyle(this.showSlider, this.sliderChangeMode)) 1121 1122 } 1123 .width('100%') 1124 1125 }.width('100%') 1126 } 1127} 1128``` 1129 1130 1131 1132### 示例4（设置滑动条渐变色） 1133 1134该示例通过colorGradient设置滑动条渐变色，通过focusable、defaultFocus和focusOnTouch设置滑动条支持表冠操作。 1135 1136```ts 1137// xxx.ets 1138@Entry 1139@Component 1140struct SliderExample { 1141 @State inSetValueOne: number = 60 1142 @State colorGradient: LinearGradient = new LinearGradient([{ color: "#FF0000FF", offset: 0 }, { color: "#FFFF0000", offset: 1 }]) 1143 @State sensitivity: CrownSensitivity | undefined | null = CrownSensitivity.MEDIUM 1144 scroller: Scroller = new Scroller() 1145 1146 getIntegerDigits(num: number): string { 1147 let numRound = Math.round(num); 1148 return numRound.toString(); 1149 } 1150 1151 build() { 1152 Column() { 1153 Scroll(this.scroller){ 1154 Column() { 1155 Row() { 1156 Stack({ alignContent: Alignment.Top }) { 1157 Slider({ 1158 value: this.inSetValueOne, 1159 min: 0, 1160 max: 100, 1161 style: SliderStyle.NONE, 1162 direction: Axis.Vertical, 1163 reverse: true 1164 }) 1165 .focusable(true) 1166 .defaultFocus(true) 1167 .focusOnTouch(true) 1168 .digitalCrownSensitivity(this.sensitivity) 1169 .trackColor("#26FFFFFF") 1170 .trackThickness(52) 1171 .selectedColor(this.colorGradient) 1172 .onChange((value: number, mode: SliderChangeMode) => { 1173 this.inSetValueOne = value 1174 }) 1175 } 1176 .height(233 - 66) 1177 .width(52) 1178 .margin({ top: 33, bottom: 33, left: 56 }) 1179 Column() { 1180 Text('音量') 1181 .fontSize(19) 1182 .fontColor("#A9FFFFFF") 1183 .fontWeight(500) 1184 .textAlign(TextAlign.Start) 1185 .margin({ left: 20 }) 1186 Row() { 1187 Text(this.getIntegerDigits(this.inSetValueOne)) 1188 .fontSize(52) 1189 .fontColor("#FFFFFFFF") 1190 .fontWeight(700) 1191 .textAlign(TextAlign.Start) 1192 .margin({ left: 20 }) 1193 Text('%') 1194 .fontSize(19) 1195 .fontColor("#FFFFFFFF") 1196 .fontWeight(500) 1197 .textAlign(TextAlign.Start) 1198 .margin({ left: 2 }) 1199 } 1200 }.alignItems(HorizontalAlign.Start) 1201 } 1202 .width(233) 1203 .height(233) 1204 .borderRadius(116.5) 1205 .backgroundColor(Color.Black) 1206 } 1207 } 1208 }.width('100%') 1209 } 1210} 1211``` 1212 1213 1214 1215 1216### 示例5（滑动条设置前后缀内容） 1217 1218该示例实现了Slider组件通过prefix、suffix属性设置滑动条的前后缀内容，定制其内容区以及无障碍属性。设置无障碍属性后，屏幕阅读器将以设置的无障碍内容进行朗读。 1219 1220```ts 1221// xxx.ets 1222import { ComponentContent } from '@kit.ArkUI'; 1223 1224class NodeParams { 1225 param: ResourceStr = "" 1226 1227 constructor(param: ResourceStr) { 1228 this.param = param; 1229 } 1230} 1231 1232@Builder 1233function textBuilder(params: NodeParams) { 1234 Text(params.param) 1235 .fontSize($r('sys.float.Caption_L')) 1236 .clip(true) 1237 .textAlign(TextAlign.Center) 1238 .fontColor(Color.Black) 1239} 1240 1241@Entry 1242@Component 1243struct SliderExample { 1244 private pre: string = '低'; 1245 private suf: string = '高'; 1246 private uiContext: UIContext = this.getUIContext(); 1247 1248 private preNode1: ComponentContent<NodeParams> = new ComponentContent(this.uiContext, wrapBuilder(textBuilder), new NodeParams(this.pre)); 1249 private sufNode1: ComponentContent<NodeParams> = new ComponentContent(this.uiContext, wrapBuilder(textBuilder), new NodeParams(this.suf)); 1250 private preNode2: ComponentContent<NodeParams> = new ComponentContent(this.uiContext, wrapBuilder(textBuilder), new NodeParams(this.pre)); 1251 private sufNode2: ComponentContent<NodeParams> = new ComponentContent(this.uiContext, wrapBuilder(textBuilder), new NodeParams(this.suf)); 1252 private preNode3: ComponentContent<NodeParams> = new ComponentContent(this.uiContext, wrapBuilder(textBuilder), new NodeParams(this.pre)); 1253 private sufNode3: ComponentContent<NodeParams> = new ComponentContent(this.uiContext, wrapBuilder(textBuilder), new NodeParams(this.suf)); 1254 private preNode4: ComponentContent<NodeParams> = new ComponentContent(this.uiContext, wrapBuilder(textBuilder), new NodeParams(this.pre)); 1255 private sufNode4: ComponentContent<NodeParams> = new ComponentContent(this.uiContext, wrapBuilder(textBuilder), new NodeParams(this.suf)); 1256 private preNode5: ComponentContent<NodeParams> = new ComponentContent(this.uiContext, wrapBuilder(textBuilder), new NodeParams(this.pre)); 1257 private sufNode5: ComponentContent<NodeParams> = new ComponentContent(this.uiContext, wrapBuilder(textBuilder), new NodeParams(this.suf)); 1258 private preNode6: ComponentContent<NodeParams> = new ComponentContent(this.uiContext, wrapBuilder(textBuilder), new NodeParams(this.pre)); 1259 private sufNode6: ComponentContent<NodeParams> = new ComponentContent(this.uiContext, wrapBuilder(textBuilder), new NodeParams(this.suf)); 1260 1261 build() { 1262 Column({ space: 8 }) { 1263 Text('outset slider').fontSize(9).fontColor(0xCCCCCC).width('90%').margin(15) 1264 Row() { 1265 Slider({ 1266 value: 50, 1267 min: 0, 1268 max: 100, 1269 style: SliderStyle.OutSet 1270 }) 1271 .showTips(true) 1272 .prefix(this.preNode1) 1273 .suffix(this.sufNode1) 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 .prefix(this.preNode3) 1286 } 1287 .width('80%') 1288 1289 Row() { 1290 Slider({ 1291 value: 50, 1292 min: 0, 1293 max: 100, 1294 style: SliderStyle.OutSet 1295 }) 1296 .showTips(true) 1297 .suffix(this.sufNode3) 1298 } 1299 .width('80%') 1300 1301 Text('inset slider').fontSize(9).fontColor(0xCCCCCC).width('90%').margin(15) 1302 Row() { 1303 Slider({ 1304 value: 50, 1305 min: 0, 1306 max: 100, 1307 style: SliderStyle.InSet 1308 }) 1309 .blockColor('#191970') 1310 .trackColor('#ADD8E6') 1311 .selectedColor('#4169E1') 1312 .showTips(true) 1313 .trackThickness(36) 1314 .prefix(this.preNode2) 1315 .suffix(this.sufNode2) 1316 } 1317 .width('80%') 1318 1319 Row() { 1320 Slider({ 1321 value: 50, 1322 min: 0, 1323 max: 100, 1324 style: SliderStyle.InSet 1325 }) 1326 .blockColor('#191970') 1327 .trackColor('#ADD8E6') 1328 .selectedColor('#4169E1') 1329 .showTips(true) 1330 .trackThickness(36) 1331 .prefix(this.preNode4) 1332 } 1333 .width('80%') 1334 1335 Row() { 1336 Slider({ 1337 value: 50, 1338 min: 0, 1339 max: 100, 1340 style: SliderStyle.InSet 1341 }) 1342 .blockColor('#191970') 1343 .trackColor('#ADD8E6') 1344 .selectedColor('#4169E1') 1345 .showTips(true) 1346 .trackThickness(36) 1347 .suffix(this.sufNode4) 1348 } 1349 .width('80%') 1350 1351 Text('slider Show Step').fontSize(9).fontColor(0xCCCCCC).width('90%').margin(15) 1352 Row() { 1353 Slider({ 1354 value: 50, 1355 min: 0, 1356 max: 100, 1357 step:10, 1358 style: SliderStyle.InSet 1359 }) 1360 .blockColor('#191970') 1361 .trackColor('#ADD8E6') 1362 .selectedColor('#4169E1') 1363 .showTips(true) 1364 .trackThickness(36) 1365 .showSteps(true) 1366 .prefix(this.preNode5, { 1367 accessibilityText: 'prefixText', 1368 accessibilityDescription: 'prefixDescription', 1369 accessibilityLevel: 'auto', 1370 accessibilityGroup: true 1371 }) 1372 .suffix(this.sufNode5, { 1373 accessibilityText: 'suffixText', 1374 accessibilityDescription: 'suffixDescription', 1375 accessibilityLevel: 'auto', 1376 accessibilityGroup: true 1377 }) 1378 } 1379 .width('80%') 1380 1381 Row() { 1382 Slider({ 1383 value: 50, 1384 min: 0, 1385 max: 100, 1386 step:10, 1387 style: SliderStyle.InSet 1388 }) 1389 .blockColor('#191970') 1390 .trackColor('#ADD8E6') 1391 .selectedColor('#4169E1') 1392 .showTips(true) 1393 .trackThickness(36) 1394 .showSteps(true) 1395 .prefix(this.preNode6, { 1396 accessibilityText: 'prefixText', 1397 accessibilityDescription: 'prefixDescription', 1398 accessibilityLevel: 'auto', 1399 accessibilityGroup: true 1400 }) 1401 } 1402 .width('80%') 1403 1404 Row() { 1405 Slider({ 1406 value: 50, 1407 min: 0, 1408 max: 100, 1409 step:10, 1410 style: SliderStyle.InSet 1411 }) 1412 .blockColor('#191970') 1413 .trackColor('#ADD8E6') 1414 .selectedColor('#4169E1') 1415 .showTips(true) 1416 .trackThickness(36) 1417 .showSteps(true) 1418 .suffix(this.sufNode6, { 1419 accessibilityText: 'suffixText', 1420 accessibilityDescription: 'suffixDescription', 1421 accessibilityLevel: 'auto', 1422 accessibilityGroup: true 1423 }) 1424 } 1425 .width('80%') 1426 }.width('100%') 1427 } 1428} 1429``` 1430 1431 1432 1433 1434### 示例6（滑动条设置刻度点无障碍文本） 1435 1436该示例实现了Slider组件通过showSteps属性设置刻度点的无障碍文本信息。设置后，屏幕阅读器将以设置的无障碍内容进行朗读。 1437 1438```ts 1439 1440class SliderBlockBorderColorModifier1 implements AttributeModifier<SliderAttribute>{ 1441 optionMaps:Map<number, SliderStepItemAccessibility> = new Map() 1442 .set(1, {text : "123123"}) 1443 .set(2, {text : "Slider无障碍文本"}) 1444 .set(3, {text : $r('app.string.stepItemText')}) 1445 .set(4, {text : "!@#$%^&*()"}); 1446 applyNormalAttribute(instance: SliderAttribute): void { 1447 instance.showSteps(true, {stepsAccessibility: this.optionMaps}) 1448 } 1449} 1450@Entry 1451@Component 1452struct SliderExample { 1453 @State show: boolean = true; 1454 @State optionMaps:Map<number, SliderStepItemAccessibility> = new Map(); 1455 private sliderModifier: SliderBlockBorderColorModifier1 =new SliderBlockBorderColorModifier1() 1456 aboutToAppear(){ 1457 this.optionMaps.set(1, {text : "123123"}) 1458 this.optionMaps.set(2, {text : "Slider无障碍文本"}) 1459 this.optionMaps.set(3, {text : $r('app.string.app_name')}) 1460 this.optionMaps.set(4, {text : "!@#$%^&*()"}) 1461 this.show = true; 1462 } 1463 build() { 1464 Column({ space: 8 }) { 1465 Text("show steps").fontSize(12).fontColor(0xCCCCCC).margin(15).width('90%') 1466 Row() { 1467 Slider({ 1468 style: SliderStyle.InSet, 1469 value: 20, 1470 step: 10, 1471 max: 50, 1472 min: 0, 1473 direction: Axis.Horizontal 1474 }) 1475 .stepSize(8) 1476 .stepColor(Color.Yellow) 1477 .showSteps(true, {stepsAccessibility: this.optionMaps}) 1478 } .width('80%').height(300) 1479 Divider() 1480 Text("modifier").fontSize(12).fontColor(0xCCCCCC).margin(15).width('90%') 1481 Row() { 1482 Slider({ 1483 style: SliderStyle.InSet, 1484 value: 20, 1485 step: 10, 1486 max: 50, 1487 min: 0, 1488 direction: Axis.Horizontal 1489 }) 1490 .stepSize(8) 1491 .stepColor(Color.Yellow) 1492 .attributeModifier(this.sliderModifier) 1493 } .width('80%').height(300) 1494 Divider() 1495 } 1496 } 1497} 1498 1499``` 1500 1501 1502### 示例7（设置滑动条的双向绑定） 1503 1504从API version 11开始，通过将[SliderOptions](#slideroptions对象说明)的value属性设置为[$$](../../../ui/state-management/arkts-two-way-sync.md)绑定的变量，实现数据同步。 1505 1506```ts 1507// xxx.ets 1508@Entry 1509@Component 1510struct SliderExample { 1511 @State valueWith$: number = 40 1512 @State valueWithout$: number = 40 1513 build() { 1514 Column({ space: 20 }) { 1515 Text("使用$$双向绑定: " + this.valueWith$) 1516 Slider({ 1517 value: $$this.valueWith$, 1518 min: 0, 1519 max: 100, 1520 }) 1521 1522 Text("不使用$$双向绑定: " + this.valueWithout$) 1523 Slider({ 1524 value: this.valueWithout$, 1525 min: 0, 1526 max: 100, 1527 }) 1528 } 1529 } 1530} 1531 1532``` 1533 1534
