1# Slider 2 3滑动条组件，通常用于快速调节设置值，如音量调节、亮度调节等应用场景。 4 5> **说明：** 6> 7> 该组件从API version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 8 9 10## 子组件 11 12无 13 14 15## 接口 16 17Slider(options?: SliderOptions) 18 19**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 20 21**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 22 23**系统能力：** SystemCapability.ArkUI.ArkUI.Full 24 25**参数：** 26 27| 参数名 | 类型 | 必填 | 说明 | 28| ------- | --------------------------------------- | ---- | ------------------ | 29| options | [SliderOptions](#slideroptions对象说明) | 否 | 配置滑动条的参数。 | 30 31## SliderOptions对象说明 32 33**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 34 35**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 36 37**系统能力：** SystemCapability.ArkUI.ArkUI.Full 38 39| 名称 | 类型 | 必填 | 说明 | 40| -------- | -------- | -------- | -------- | 41| 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。 | 42| min | number | 否 | 设置最小值。<br/>默认值：0 | 43| max | number | 否 | 设置最大值。<br/>默认值：100<br/>**说明：** <br/>min >= max异常情况，min取默认值0，max取默认值100。<br/>value不在[min, max]范围之内，取min或者max，靠近min取min，靠近max取max。 | 44| step | number | 否 | 设置Slider滑动步长。<br/>默认值：1<br/>取值范围：[0.01, max - min]<br/>**说明：** <br/>若设置的step值小于0或大于max值时，则按默认值显示。 | 45| style | [SliderStyle](#sliderstyle枚举说明) | 否 | 设置Slider的滑块与滑轨显示样式。<br/>默认值：SliderStyle.OutSet | 46| direction<sup>8+</sup> | [Axis](ts-appendix-enums.md#axis) | 否 | 设置滑动条滑动方向为水平或竖直方向。<br/>默认值：Axis.Horizontal | 47| reverse<sup>8+</sup> | boolean | 否 | 设置滑动条取值范围是否反向。<br/>默认值：false<br/>值为true时，横向Slider从右往左滑动，竖向Slider从下往上滑动。值为false时，横向Slider从左往右滑动，竖向Slider从上往下滑动。 | 48 49## SliderStyle枚举说明 50 51**系统能力：** SystemCapability.ArkUI.ArkUI.Full 52 53| 名称 | 说明 | 54| -------- | -------- | 55| OutSet | 滑块在滑轨上。<br/>**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 56| InSet | 滑块在滑轨内。<br/>**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 57| NONE<sup>12+</sup> | 无滑块 <br/>**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 58 59## 属性 60 61支持除触摸热区以外的[通用属性](ts-component-general-attributes.md)。 62 63### blockColor 64 65blockColor(value: ResourceColor) 66 67设置滑块的颜色。 68 69当滑块形状设置为SliderBlockType.DEFAULT时，blockColor可设置默认圆形滑块颜色。 70 71当滑块形状设置为SliderBlockType.IMAGE时，滑块无填充，设置blockColor不生效。 72 73当滑块形状设置为SliderBlockType.SHAPE时，blockColor可设置自定义形状的填充颜色。 74 75**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 76 77**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 78 79**系统能力：** SystemCapability.ArkUI.ArkUI.Full 80 81**参数：** 82 83| 参数名 | 类型 | 必填 | 说明 | 84| ------ | ------------------------------------------ | ---- | ----------------------------------- | 85| value | [ResourceColor](ts-types.md#resourcecolor) | 是 | 滑块的颜色。 <br/>默认值：`$r('sys.color.ohos_id_color_foreground_contrary')` | 86 87### trackColor 88 89trackColor(value: ResourceColor | LinearGradient) 90 91设置滑轨的背景颜色。 92 93从API version 12开始支持利用LinearGradient设置滑轨的渐变色。 94 95**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 96 97**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 98 99**系统能力：** SystemCapability.ArkUI.ArkUI.Full 100 101**参数：** 102 103| 参数名 | 类型 | 必填 | 说明 | 104| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 105| value | [ResourceColor](ts-types.md#resourcecolor) \| [LinearGradient<sup>12+</sup>](ts-basic-components-datapanel.md#lineargradient10) | 是 | 滑轨的背景颜色。<br/>**说明：** 设置渐变色时，如果颜色断点颜色值为非法值或渐变色断点为空，渐变色将不起效果。默认值：`$r('sys.color.ohos_id_color_component_normal')`。注意：该接口中的LinearGradient类型不支持在原子化服务中使用。 | 106 107### selectedColor 108 109selectedColor(value: ResourceColor) 110 111设置滑轨的已滑动部分颜色。 112 113**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 114 115**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 116 117**系统能力：** SystemCapability.ArkUI.ArkUI.Full 118 119**参数：** 120 121| 参数名 | 类型 | 必填 | 说明 | 122| ------ | ------------------------------------------ | ---- | ------------------------------------------------------------ | 123| value | [ResourceColor](ts-types.md#resourcecolor) | 是 | 滑轨的已滑动部分颜色。 <br/>**说明：** 设置渐变色时设置渐变色时，如果颜色断点颜色值为非法值或渐变色断点为空，渐变色将不起效果。默认值：`$r('sys.color.ohos_id_color_emphasize')`。| 124 125### selectedColor<sup>18+</sup> 126 127selectedColor(selectedColor: ResourceColor | LinearGradient) 128 129设置滑轨的已滑动部分颜色。与[selectedColor](#selectedcolor)相比，新增了LinearGradient类型的支持。 130 131从API version 18开始支持利用LinearGradient设置滑轨的已滑动部分的渐变色。 132 133**卡片能力：** 从API version 18开始，该接口支持在ArkTS卡片中使用。 134 135**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 136 137**系统能力：** SystemCapability.ArkUI.ArkUI.Full 138 139**参数：** 140 141| 参数名 | 类型 | 必填 | 说明 | 142| ------------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 143| selectedColor | [ResourceColor](ts-types.md#resourcecolor) \| [LinearGradient<sup>18+</sup>](ts-basic-components-datapanel.md#lineargradient10) | 是 | 滑轨的已滑动部分颜色。 <br/>**说明：** 设置渐变色时，若颜色断点颜色值为非法值或者渐变色断点为空时，渐变色不起效果。 <br/>默认值：`$r('sys.color.ohos_id_color_emphasize')` | 144 145### showSteps 146 147showSteps(value: boolean) 148 149设置当前是否显示步长刻度值。 150 151**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 152 153**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 154 155**系统能力：** SystemCapability.ArkUI.ArkUI.Full 156 157**参数：** 158 159| 参数名 | 类型 | 必填 | 说明 | 160| ------ | ------- | ---- | ------------------------------------------ | 161| value | boolean | 是 | 当前是否显示步长刻度值。值为true时显示刻度值，值为false时不显示刻度值。<br/>默认值：false | 162 163### showTips 164 165showTips(value: boolean, content?: ResourceStr) 166 167设置滑动时是否显示气泡提示。 168 169当direction的值为Axis.Horizontal时，tip显示在滑块上方，如果上方空间不够，则在下方显示。值为Axis.Vertical时，tip显示在滑块左边，如果左边空间不够，则在右边显示。不设置周边边距或者周边边距比较小时，tip会被截断。 170 171tip的绘制区域为Slider自身节点的overlay。 172 173**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 174 175**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 176 177**系统能力：** SystemCapability.ArkUI.ArkUI.Full 178 179**参数：** 180 181| 参数名 | 类型 | 必填 | 说明 | 182| --------------------- | -------------------------------------- | ---- | ------------------------------------------ | 183| value | boolean | 是 | 滑动时是否显示气泡提示。值为true时，显示气泡。值为false时，不显示气泡。<br/>默认值：false | 184| content<sup>10+</sup> | [ResourceStr](ts-types.md#resourcestr) | 否 | 气泡提示的文本内容，默认显示当前百分比。 | 185 186### trackThickness<sup>8+</sup> 187 188trackThickness(value: Length) 189 190设置滑轨的粗细。设置小于等于0的值时，取默认值。 191 192为保证滑块和滑轨的[SliderStyle](#sliderstyle枚举说明)样式，[blockSize](#blocksize10)跟随trackThickness同比例增减。 193 194当style为[SliderStyle](#sliderstyle枚举说明).OutSet时，trackThickness ：[blockSize](#blocksize10) = 1 ：4，当style为[SliderStyle](#sliderstyle枚举说明).InSet时，trackThickness ：[blockSize](#blocksize10) = 5 ：3。 195 196trackThickness或[blockSize](#blocksize10)的大小超过Slider组件的宽度或高度时，取默认值。 197 198当[SliderStyle](#sliderstyle枚举说明)设置为OutSet时，尽管trackThickness的大小没超过Slider组件的宽度或高度，但是[blockSize](#blocksize10)超过了，取默认值。 199 200**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 201 202**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 203 204**系统能力：** SystemCapability.ArkUI.ArkUI.Full 205 206**参数：** 207 208| 参数名 | 类型 | 必填 | 说明 | 209| ------ | ---------------------------- | ---- | ------------------------------------------------------------ | 210| value | [Length](ts-types.md#length) | 是 | 滑轨的粗细。<br/>默认值：当参数style的值设置[SliderStyle](#sliderstyle枚举说明).OutSet 时为 4.0vp，[SliderStyle](#sliderstyle枚举说明).InSet时为20.0vp。 | 211 212### blockBorderColor<sup>10+</sup> 213 214blockBorderColor(value: ResourceColor) 215 216设置滑块描边颜色。 217 218当滑块形状设置为SliderBlockType.DEFAULT时，blockBorderColor可设置默认圆形滑块描边颜色。 219 220当滑块形状设置为SliderBlockType.IMAGE时，滑块无描边，设置blockBorderColor不生效。 221 222当滑块形状设置为SliderBlockType.SHAPE时，blockBorderColor可设置自定义形状中线的颜色。 223 224**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 225 226**系统能力：** SystemCapability.ArkUI.ArkUI.Full 227 228**参数：** 229 230| 参数名 | 类型 | 必填 | 说明 | 231| ------ | ------------------------------------------ | ---- | -------------------------------------- | 232| value | [ResourceColor](ts-types.md#resourcecolor) | 是 | 滑块描边颜色。<br/>默认值：'#00000000' | 233 234### blockBorderWidth<sup>10+</sup> 235 236blockBorderWidth(value: Length) 237 238设置滑块描边粗细。 239 240当滑块形状设置为SliderBlockType.DEFAULT时，blockBorderWidth可设置默认圆形滑块描边粗细。 241 242当滑块形状设置为SliderBlockType.IMAGE时，滑块无描边，设置blockBorderWidth不生效。 243 244当滑块形状设置为SliderBlockType.SHAPE时，blockBorderWidth可设置自定义形状中线的粗细。 245 246**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 247 248**系统能力：** SystemCapability.ArkUI.ArkUI.Full 249 250**参数：** 251 252| 参数名 | 类型 | 必填 | 说明 | 253| ------ | ---------------------------- | ---- | -------------- | 254| value | [Length](ts-types.md#length) | 是 | 滑块描边粗细。<br/>**说明**：设置string类型时，不支持百分比。 | 255 256### stepColor<sup>10+</sup> 257 258stepColor(value: ResourceColor) 259 260设置刻度颜色。 261 262**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 263 264**系统能力：** SystemCapability.ArkUI.ArkUI.Full 265 266**参数：** 267 268| 参数名 | 类型 | 必填 | 说明 | 269| ------ | ------------------------------------------ | ---- | ---------------------------------- | 270| value | [ResourceColor](ts-types.md#resourcecolor) | 是 | 刻度颜色。<br/>默认值：<br/>`$r('sys.color.ohos_id_color_foreground')`混合<br/>`$r('sys.color.ohos_id_alpha_normal_bg')`透明度的颜色 | 271 272### trackBorderRadius<sup>10+</sup> 273 274trackBorderRadius(value: Length) 275 276设置底板圆角半径。 277 278**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 279 280**系统能力：** SystemCapability.ArkUI.ArkUI.Full 281 282**参数：** 283 284| 参数名 | 类型 | 必填 | 说明 | 285| ------ | ---------------------------- | ---- | -------------------------------- | 286| value | [Length](ts-types.md#length) | 是 | 底板圆角半径。<br/>默认值：<br/>style值为SliderStyle.OutSet默认值为'2vp'<br/>style值为SliderStyle.InSet默认值为'10vp'。<br/>**说明**：设置string类型时，不支持百分比。设定值小于0时取默认值。 | 287 288### selectedBorderRadius<sup>12+</sup> 289 290selectedBorderRadius(value: Dimension) 291 292设置已滑动部分（高亮）圆角半径。 293 294**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 295 296**系统能力：** SystemCapability.ArkUI.ArkUI.Full 297 298**参数：** 299 300| 参数名 | 类型 | 必填 | 说明 | 301| ------ | ---------------------------- | ---- | -------------------------------- | 302| value | [Dimension](ts-types.md#dimension10)| 是 | 已选择部分圆角半径。<br/>默认值：style值为SliderStyle.InSet或SliderStyle.OutSet时，跟随底板圆角；style值为SliderStyle.NONE时，为0。<br/>**说明**：不支持Percentage类型。设定值小于0时取默认值。 | 303 304### blockSize<sup>10+</sup> 305 306blockSize(value: SizeOptions) 307 308设置滑块大小。 309 310当滑块形状设置为SliderBlockType.DEFAULT时，取宽高的最小值作为圆形半径。 311 312当滑块形状设置为SliderBlockType.IMAGE时，用于设置图片的尺寸大小，图片采用ObjectFit.Cover策略进行缩放。 313 314当滑块形状设置为SliderBlockType.SHAPE时，用于设置自定义形状的大小，自定义形状也会采用ObjectFit.Cover策略进行缩放。 315 316**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 317 318**系统能力：** SystemCapability.ArkUI.ArkUI.Full 319 320**参数：** 321 322| 参数名 | 类型 | 必填 | 说明 | 323| ------ | -------------------------------------- | ---- | ------------------------------------------------------------ | 324| 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的时候，取默认值。 | 325 326### blockStyle<sup>10+</sup> 327 328blockStyle(value: SliderBlockStyle) 329 330设置滑块形状参数。 331 332**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 333 334**系统能力：** SystemCapability.ArkUI.ArkUI.Full 335 336**参数：** 337 338| 参数名 | 类型 | 必填 | 说明 | 339| ------ | ----------------------------------------------- | ---- | ------------------------------------------------------------ | 340| value | [SliderBlockStyle](#sliderblockstyle10对象说明) | 是 | 滑块形状参数。<br/>默认值：SliderBlockType.DEFAULT，使用圆形滑块。 | 341 342### stepSize<sup>10+</sup> 343 344stepSize(value: Length) 345 346设置刻度大小（直径）。当值为0时，刻度点不显示，当值小于0时，取默认值。 347 348**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 349 350**系统能力：** SystemCapability.ArkUI.ArkUI.Full 351 352**参数：** 353 354| 参数名 | 类型 | 必填 | 说明 | 355| ------ | ---------------------------- | ---- | ------------------------------------- | 356| value | [Length](ts-types.md#length) | 是 | 刻度大小（直径）。 <br/>默认值：'4vp'<br/>取值范围：[0, [trackThickness](#trackthickness8)) | 357 358### minLabel<sup>(deprecated)</sup> 359 360minLabel(value: string) 361 362设置最小值。 363 364从API Version 9开始废弃，使用min替代。 365 366**系统能力：** SystemCapability.ArkUI.ArkUI.Full 367 368**参数：** 369 370| 参数名 | 类型 | 必填 | 说明 | 371| ------ | ------ | ---- | -------- | 372| value | string | 是 | 最小值。 | 373 374### maxLabel<sup>(deprecated)</sup> 375 376maxLabel(value: string) 377 378设置最大值。 379 380从API Version 9开始废弃，使用max替代。 381 382**系统能力：** SystemCapability.ArkUI.ArkUI.Full 383 384**参数：** 385 386| 参数名 | 类型 | 必填 | 说明 | 387| ------ | ------ | ---- | -------- | 388| value | string | 是 | 最大值。 | 389 390> **说明：** 391> 392> - Slider无默认padding。 393> - 当Slider为水平滑动条时，Slider默认高度为40vp，宽度为父容器的宽度，滑动条居中显示，左右间距为分别为10vp，若设置padding，padding不会覆盖左右间距。 394> - 当Slider为竖直滑动条时，Slider默认宽度为40vp，高度为父容器的高度，滑动条居中显示，上下间距为分别为6vp，若设置padding，padding不会覆盖上下间距。 395 396### sliderInteractionMode<sup>12+</sup> 397 398sliderInteractionMode(value: SliderInteraction) 399 400设置用户与滑动条组件交互方式。 401 402**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 403 404**系统能力：** SystemCapability.ArkUI.ArkUI.Full 405 406**参数：** 407 408| 参数名 | 类型 | 必填 | 说明 | 409| ------ | ------------------------------------------------- | ---- | ------------------------------------------------------------ | 410| value | [SliderInteraction](#sliderinteraction12枚举说明) | 是 | 用户与滑动条组件交互方式。 <br /> 默认值：SliderInteraction.SLIDE_AND_CLICK。 | 411 412### minResponsiveDistance<sup>12+</sup> 413 414minResponsiveDistance(value: number) 415 416设置滑动响应的最小距离。 417 418**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 419 420**系统能力：** SystemCapability.ArkUI.ArkUI.Full 421 422**参数：** 423 424| 参数名 | 类型 | 必填 | 说明 | 425| ------ | ------- | ---- | ------------------------------------------ | 426| value | number | 是 | 设置滑动响应的最小距离，滑动超过此距离后才响应使滑块滑动。<br/>**说明：** <br/>单位与参数[min](#slideroptions对象说明)和[max](#slideroptions对象说明)一致。<br/>当value小于0、大于MAX-MIN或非法值时，取默认值。<br/>默认值：0 | 427 428### contentModifier<sup>12+</sup> 429 430contentModifier(modifier: ContentModifier\<SliderConfiguration>) 431 432定制Slider内容区的方法。 433 434**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 435 436**系统能力：** SystemCapability.ArkUI.ArkUI.Full 437 438**参数：** 439 440| 参数名 | 类型 | 必填 | 说明 | 441| ------ | --------------------------------------------- | ---- | ------------------------------------------------ | 442| modifier | [ContentModifier\<SliderConfiguration>](#sliderconfiguration12对象说明) | 是 | 在Slider组件上，定制内容区的方法。<br/>modifier：内容修改器，开发者需要自定义class实现ContentModifier接口。 | 443 444> **说明：** 445> 446> - 如果设置了contentModifier，则在自定义区域内点击和手势滑动均不可触发原Slider组件的onChange事件。 447> - 仅当调用triggerChange函数且传递正确的参数值时才可以触发原Slider组件的onChange事件。 448 449### slideRange<sup>12+</sup> 450 451slideRange(value: SlideRange) 452 453设置有效滑动区间。 454 455**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 456 457**系统能力：** SystemCapability.ArkUI.ArkUI.Full 458 459**参数：** 460 461| 参数名 | 类型 | 必填 | 说明 | 462| ------ | ----------------------------------- | ---- | ---------------- | 463| value | [SlideRange](#sliderange12对象说明) | 是 | 设置有效滑动区间 | 464 465### enableHapticFeedback<sup>18+</sup> 466 467enableHapticFeedback(enabled: boolean) 468 469设置是否开启触控反馈。 470 471开启触控反馈时，需要在工程的module.json5中配置requestPermissions字段开启振动权限，配置如下： 472 473```json 474"requestPermissions": [ 475 { 476 "name": "ohos.permission.VIBRATE", 477 } 478 ] 479``` 480 481**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 482 483**系统能力：** SystemCapability.ArkUI.ArkUI.Full 484 485| 参数名 | 类型 | 必填 | 说明 | 486| ------ | --------------------------------------------- |-----|-------------------------------------------------------------------------------------| 487| enabled | boolean | 是 | 设置是否开启触控反馈。<br/>默认值：true，true表示开启触控反馈，false表示不开启触控反馈。| 488 489### digitalCrownSensitivity<sup>18+</sup> 490 491digitalCrownSensitivity(sensitivity: Optional\<CrownSensitivity>) 492 493设置旋转表冠的灵敏度。 494 495**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 496 497**系统能力：** SystemCapability.ArkUI.ArkUI.Full 498 499**参数：** 500 501| 参数名 | 类型 | 必填 | 说明 | 502| ----------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------- | 503| sensitivity | [Optional\<CrownSensitivity>](ts-appendix-enums.md#crownsensitivity18) | 是 | 旋转表冠的灵敏度。<br />默认值：CrownSensitivity.MEDIUM | 504 505## SliderBlockStyle<sup>10+</sup>对象说明 506 507Slider组件滑块形状参数。 508 509**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 510 511**系统能力：** SystemCapability.ArkUI.ArkUI.Full 512 513| 名称 | 类型 | 必填 | 说明 | 514| ----- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 515| type | [SliderBlockType](#sliderblocktype10枚举说明) | 是 | 设置滑块形状。<br/>默认值：SliderBlockType.DEFAULT，使用圆形滑块。 | 516| image | [ResourceStr](ts-types.md#resourcestr) | 否 | 设置滑块图片资源。<br />图片显示区域大小由blockSize属性控制，请勿输入尺寸过大的图片。 | 517| 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) | 否 | 设置滑块使用的自定义形状。 | 518 519## SliderBlockType<sup>10+</sup>枚举说明 520 521Slider组件滑块形状枚举。 522 523**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 524 525**系统能力：** SystemCapability.ArkUI.ArkUI.Full 526 527| 名称 | 值 | 说明 | 528| ------- | -- | ---------------------- | 529| DEFAULT | 0 | 使用默认滑块（圆形）。 | 530| IMAGE | 1 | 使用图片资源作为滑块。 | 531| SHAPE | 2 | 使用自定义形状作为滑块。 | 532 533## SliderInteraction<sup>12+</sup>枚举说明 534 535用户与滑动条组件交互方式 536 537**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 538 539**系统能力：** SystemCapability.ArkUI.ArkUI.Full 540 541| 名称 | 值 |说明 | 542| ------ | -- | ----------------------------- | 543| SLIDE_AND_CLICK | 0 | 用户可拖拽滑块或者点击滑轨使滑块移动，鼠标或手指按下即发生移动。| 544| SLIDE_ONLY | 1 | 不允许用户通过点击滑轨使滑块移动。| 545| SLIDE_AND_CLICK_UP | 2 |用户可拖拽滑块或者点击滑轨使滑块移动，鼠标或手指抬起时，若与屏幕按压位置一致，则触发移动。| 546 547## SlideRange<sup>12+</sup>对象说明 548 549定义SlideRange中使用的回调类型。 550 551**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 552 553**系统能力：** SystemCapability.ArkUI.ArkUI.Full 554 555| 名称 | 类型 | 必填 | 说明 | 556|----|--------| ---- |--------------| 557| from | number | 否 | 设置有效滑动区间的开始。 | 558| to | number | 否 | 设置有效滑动区间的结束。 | 559 560> **说明：** 561> 562> - 当前仅当MIN<=from<=to<=MAX时该接口生效(MIN和MAX不依赖于其设置的值，而取决于其实际生效的值)。 563> - 可只设置from或者to，也可以同时设置from和to。 564> - 当接口生效，设置的from处于紧邻的step整数倍的值之间，则from实际取左区间step整数倍的那个值或者MIN作为修正后的值。 565> - 当接口生效，设置的to处于紧邻的step整数倍的值之间，则to实际取右区间step整数倍的那个值或者MAX作为修正后的值。 566> - 在from和to取修正值后， 当value是undefined或null时，其取值与from一致; 当value是数值型，且value <= from，则取from; value > to，则取to。 567 568## 事件 569 570支持[通用事件](ts-component-general-events.md)外，还支持以下事件： 571 572### onChange 573 574onChange(callback: (value: number, mode: SliderChangeMode) => void) 575 576Slider拖动或点击时触发事件回调。 577 578Begin和End状态当手势点击时都会触发，Moving和Click状态当value值发生变化时触发。 579 580当连贯动作为拖动动作时，不触发Click状态。 581 582**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 583 584**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 585 586**系统能力：** SystemCapability.ArkUI.ArkUI.Full 587 588**参数：** 589 590| 参数名 | 类型 | 必填 | 说明 | 591| ------ | --------------------------------------------- | ---- | ------------------------------------------------------------ | 592| value | number | 是 | 当前滑动进度值，变化范围为对应步长steps数组。若返回值有小数，可使用number.toFixed()方法将数据处理为预期的精度。 | 593| mode | [SliderChangeMode](#sliderchangemode枚举说明) | 是 | 事件触发的相关状态值。 | 594 595## SliderChangeMode枚举说明 596 597**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 598 599**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 600 601**系统能力：** SystemCapability.ArkUI.ArkUI.Full 602 603| 名称 | 值 | 说明 | 604| -------- | -------- | -------- | 605| Begin | 0 | 手势/鼠标接触或者按下滑块。 | 606| Moving | 1 | 正在拖动滑块过程中。 | 607| End | 2 | 手势/鼠标离开滑块。<br/>**说明：** <br/>异常值恢复成默认值时触发，即value设置小于min或大于max。 | 608| Click<sup>8+</sup> | 3 | 点击滑动条使滑块位置移动。 | 609 610## SliderConfiguration<sup>12+</sup>对象说明 611 612开发者需要自定义class实现ContentModifier接口。 613 614**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 615 616**系统能力：** SystemCapability.ArkUI.ArkUI.Full 617 618| 名称 | 类型 | 只读 | 可选 | 说明 | 619| ------ | ------ | ---------------- | ---------------- | ---------------- | 620| value | number | 否 | 否 | 当前进度值。 | 621| min | number | 否 | 否 | 最小值。 | 622| max | number | 否 | 否 | 最大值。 | 623| step | number | 否 | 否 | Slider滑动步长。 | 624| triggerChange | [SliderTriggerChangeCallback](#slidertriggerchangecallback12) | 否 | 否 | 触发Slider变化。 | 625 626## SliderTriggerChangeCallback<sup>12+</sup> 627 628type SliderTriggerChangeCallback = (value: number, mode: SliderChangeMode) => void 629 630定义SliderConfiguration中使用的回调类型。 631 632**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 633 634**系统能力：** SystemCapability.ArkUI.ArkUI.Full 635 636**参数：** 637 638| 参数名 | 类型 | 必填 | 说明 | 639| ------ | ------ | ---------------- | ---------------- | 640| value | number | 是 | 设置当前的进度值。<br/>取值范围：[[min](#slideroptions对象说明)-[max](#slideroptions对象说明)] | 641| mode | [SliderChangeMode](#sliderchangemode枚举说明) | 是 | 设置事件触发的相关状态值。 | 642 643## 示例 644 645### 示例1（滑动条基础样式） 646 647该示例通过配置style、showTips、showSteps控制气泡、刻度值、滑块和滑轨的显示。 648 649```ts 650// xxx.ets 651@Entry 652@Component 653struct SliderExample { 654 @State outSetValueOne: number = 40; 655 @State inSetValueOne: number = 40; 656 @State noneValueOne: number = 40; 657 @State outSetValueTwo: number = 40; 658 @State inSetValueTwo: number = 40; 659 @State vOutSetValueOne: number = 40; 660 @State vInSetValueOne: number = 40; 661 @State vOutSetValueTwo: number = 40; 662 @State vInSetValueTwo: number = 40; 663 664 build() { 665 Column({ space: 8 }) { 666 Text('outset slider').fontSize(9).fontColor(0xCCCCCC).width('90%').margin(15) 667 Row() { 668 Slider({ 669 value: this.outSetValueOne, 670 min: 0, 671 max: 100, 672 style: SliderStyle.OutSet 673 }) 674 .showTips(true) 675 .onChange((value: number, mode: SliderChangeMode) => { 676 this.outSetValueOne = value; 677 console.info('value:' + value + 'mode:' + mode.toString()); 678 }) 679 // toFixed(0)将滑动条返回值处理为整数精度 680 Text(this.outSetValueOne.toFixed(0)).fontSize(12) 681 } 682 .width('80%') 683 Row() { 684 Slider({ 685 value: this.outSetValueTwo, 686 step: 10, 687 style: SliderStyle.OutSet 688 }) 689 .showSteps(true) 690 .onChange((value: number, mode: SliderChangeMode) => { 691 this.outSetValueTwo = value; 692 console.info('value:' + value + 'mode:' + mode.toString()); 693 }) 694 Text(this.outSetValueTwo.toFixed(0)).fontSize(12) 695 } 696 .width('80%') 697 698 Text('inset slider').fontSize(9).fontColor(0xCCCCCC).width('90%').margin(15) 699 Row() { 700 Slider({ 701 value: this.inSetValueOne, 702 min: 0, 703 max: 100, 704 style: SliderStyle.InSet 705 }) 706 .blockColor('#191970') 707 .trackColor('#ADD8E6') 708 .selectedColor('#4169E1') 709 .showTips(true) 710 .onChange((value: number, mode: SliderChangeMode) => { 711 this.inSetValueOne = value; 712 console.info('value:' + value + 'mode:' + mode.toString()); 713 }) 714 Text(this.inSetValueOne.toFixed(0)).fontSize(12) 715 } 716 .width('80%') 717 Row() { 718 Slider({ 719 value: this.inSetValueTwo, 720 step: 10, 721 style: SliderStyle.InSet 722 }) 723 .blockColor('#191970') 724 .trackColor('#ADD8E6') 725 .selectedColor('#4169E1') 726 .showSteps(true) 727 .onChange((value: number, mode: SliderChangeMode) => { 728 this.inSetValueTwo = value; 729 console.info('value:' + value + 'mode:' + mode.toString()); 730 }) 731 Text(this.inSetValueTwo.toFixed(0)).fontSize(12) 732 } 733 .width('80%') 734 735 Text('none slider').fontSize(9).fontColor(0xCCCCCC).width('90%').margin(15) 736 Row() { 737 Slider({ 738 value: this.noneValueOne, 739 min: 0, 740 max: 100, 741 style: SliderStyle.NONE 742 }) 743 .blockColor('#191970') 744 .trackColor('#ADD8E6') 745 .selectedColor('#4169E1') 746 .showTips(true) 747 .onChange((value: number, mode: SliderChangeMode) => { 748 this.noneValueOne = value; 749 console.info('value:' + value + 'mode:' + mode.toString()); 750 }) 751 Text(this.noneValueOne.toFixed(0)).fontSize(12) 752 } 753 .width('80%') 754 755 Row() { 756 Column() { 757 Text('vertical outset slider').fontSize(9).fontColor(0xCCCCCC).width('50%').margin(15) 758 Row() { 759 Text().width('10%') 760 Slider({ 761 value: this.vOutSetValueOne, 762 style: SliderStyle.OutSet, 763 direction: Axis.Vertical 764 }) 765 .blockColor('#191970') 766 .trackColor('#ADD8E6') 767 .selectedColor('#4169E1') 768 .showTips(true) 769 .onChange((value: number, mode: SliderChangeMode) => { 770 this.vOutSetValueOne = value; 771 console.info('value:' + value + 'mode:' + mode.toString()); 772 }) 773 Slider({ 774 value: this.vOutSetValueTwo, 775 step: 10, 776 style: SliderStyle.OutSet, 777 direction: Axis.Vertical 778 }) 779 .blockColor('#191970') 780 .trackColor('#ADD8E6') 781 .selectedColor('#4169E1') 782 .showSteps(true) 783 .onChange((value: number, mode: SliderChangeMode) => { 784 this.vOutSetValueTwo = value; 785 console.info('value:' + value + 'mode:' + mode.toString()); 786 }) 787 } 788 }.width('50%').height(300) 789 790 Column() { 791 Text('vertical inset slider').fontSize(9).fontColor(0xCCCCCC).width('50%').margin(15) 792 Row() { 793 Slider({ 794 value: this.vInSetValueOne, 795 style: SliderStyle.InSet, 796 direction: Axis.Vertical, 797 reverse: true // 竖向的Slider默认是上端是min值，下端是max值，因此想要从下往上滑动，需要设置reverse为true 798 }) 799 .showTips(true) 800 .onChange((value: number, mode: SliderChangeMode) => { 801 this.vInSetValueOne = value; 802 console.info('value:' + value + 'mode:' + mode.toString()); 803 }) 804 Slider({ 805 value: this.vInSetValueTwo, 806 step: 10, 807 style: SliderStyle.InSet, 808 direction: Axis.Vertical, 809 reverse: true 810 }) 811 .showSteps(true) 812 .onChange((value: number, mode: SliderChangeMode) => { 813 this.vInSetValueTwo = value; 814 console.info('value:' + value + 'mode:' + mode.toString()); 815 }) 816 } 817 }.width('50%').height(300) 818 } 819 }.width('100%') 820 } 821} 822``` 823 824 825 826### 示例2（设置滑动条样式） 827 828该示例通过blockBorderColor、blockSize、blockBorderWidth、blockStyle设置滑块的样式，通过stepSize、stepColor设置刻度值的样式，通过trackBorderRadius设置底板的圆角，通过selectedBorderRadius设置已滑动部分的圆角。 829 830```ts 831@Entry 832@Component 833struct SliderExample { 834 @State tipsValue: number = 40; 835 836 build() { 837 Column({ space: 8 }) { 838 Text('block').fontSize(9).fontColor(0xCCCCCC).margin(15).width('90%') 839 Slider({ style: SliderStyle.OutSet, value: 40 }) 840 .blockSize({ width: 40, height: 40 }) 841 .blockBorderColor(Color.Red) 842 .blockBorderWidth(5) 843 Divider() 844 Text('step').fontSize(9).fontColor(0xCCCCCC).margin(15).width('90%') 845 Slider({ style: SliderStyle.InSet, value: 40, step: 10 }) 846 .showSteps(true) 847 .stepSize(8) 848 .stepColor(Color.Yellow) 849 Divider() 850 Text('track').fontSize(9).fontColor(0xCCCCCC).margin(15).width('90%') 851 Slider({ style: SliderStyle.InSet, value: 40 }) 852 .trackBorderRadius(2) 853 Divider() 854 Text('selected').fontSize(9).fontColor(0xCCCCCC).margin(15).width('90%') 855 Slider({ style: SliderStyle.InSet, value: 40 }) 856 .selectedBorderRadius(2) 857 Divider() 858 Text('blockStyle').fontSize(9).fontColor(0xCCCCCC).margin(15).width('90%') 859 Slider({ style: SliderStyle.OutSet, value: 40 }) 860 .blockStyle({ type: SliderBlockType.DEFAULT }) 861 Slider({ style: SliderStyle.OutSet, value: 40 }) 862 .blockStyle({ type: SliderBlockType.IMAGE, image: $r('sys.media.ohos_app_icon') }) 863 Slider({ style: SliderStyle.OutSet, value: 40 }) 864 .blockSize({ width: '60px', height: '60px' }) 865 .blockColor(Color.Red) 866 .blockStyle({ type: SliderBlockType.SHAPE, shape: new Path({ commands: 'M60 60 M30 30 L15 56 L45 56 Z' }) }) 867 Divider() 868 Text('tips').fontSize(9).fontColor(0xCCCCCC).margin(15).width('90%') 869 Slider({ style: SliderStyle.InSet, value: this.tipsValue }) 870 .showTips(true, this.tipsValue.toFixed()) 871 .onChange(value => { 872 this.tipsValue = value; 873 }) 874 } 875 } 876} 877``` 878 879 880 881 882 883### 示例3（自定义滑动条） 884 885该示例实现了Slider组件通过样式Builder定制内容区。点击增加按钮，进度条会按照原Slider设置的步长增加，反之点减少按钮进度条会减少，并触发原组件的onChange事件。 886 887```ts 888// xxx.ets 889 890@Builder 891function buildSlider(config: SliderConfiguration) { 892 Row() { 893 Column({ space: 30 }) { 894 Progress({ value: config.value, total: config.max, type: ProgressType.Ring }) 895 .margin({ top: 20 }) 896 897 Button('增加') 898 .onClick(() => { 899 config.value = config.value + config.step; 900 config.triggerChange(config.value, SliderChangeMode.Click); 901 }) 902 .width(100) 903 .height(25) 904 .fontSize(10) 905 .enabled(config.value < config.max) 906 907 Button('减少') 908 .onClick(() => { 909 config.value = config.value - config.step; 910 config.triggerChange(config.value, SliderChangeMode.Click); 911 }) 912 .width(100) 913 .height(25) 914 .fontSize(10) 915 .enabled(config.value > config.min) 916 917 Slider({ 918 value: config.value, 919 min: config.min, 920 max: config.max, 921 step: config.step, 922 }) 923 .width(config.max) 924 .visibility((config.contentModifier as MySliderStyle).showSlider ? Visibility.Visible : Visibility.Hidden) 925 .showSteps(true) 926 .onChange((value: number, mode: SliderChangeMode) => { 927 config.triggerChange(value, mode); 928 }) 929 Text('当前状态：' + ((config.contentModifier as MySliderStyle).sliderChangeMode == 0 ? "Begin" 930 : ((config.contentModifier as MySliderStyle).sliderChangeMode == 1 ? "Moving" 931 : ((config.contentModifier as MySliderStyle).sliderChangeMode == 2 ? "End" 932 : ((config.contentModifier as MySliderStyle).sliderChangeMode == 3 ? "Click" : "无"))))) 933 .fontSize(10) 934 Text('进度值：' + config.value) 935 .fontSize(10) 936 Text('最小值：' + config.min) 937 .fontSize(10) 938 Text('最大值：' + config.max) 939 .fontSize(10) 940 Text('步长：' + config.step) 941 .fontSize(10) 942 } 943 .width('80%') 944 945 } 946 .width('100%') 947} 948 949class MySliderStyle implements ContentModifier<SliderConfiguration> { 950 showSlider: boolean = true; 951 sliderChangeMode: number = 0; 952 953 constructor(showSlider: boolean, sliderChangeMode: number) { 954 this.showSlider = showSlider; 955 this.sliderChangeMode = sliderChangeMode; 956 } 957 958 applyContent(): WrappedBuilder<[SliderConfiguration]> { 959 return wrapBuilder(buildSlider); 960 } 961} 962 963 964@Entry 965@Component 966struct SliderExample { 967 @State showSlider: boolean = true; 968 @State sliderValue: number = 0; 969 @State sliderMin: number = 10; 970 @State sliderMax: number = 100; 971 @State sliderStep: number = 20; 972 @State sliderChangeMode: number = 0; 973 974 build() { 975 Column({ space: 8 }) { 976 977 Row() { 978 Slider({ 979 value: this.sliderValue, 980 min: this.sliderMin, 981 max: this.sliderMax, 982 step: this.sliderStep, 983 }) 984 .showSteps(true) 985 .onChange((value: number, mode: SliderChangeMode) => { 986 this.sliderValue = value; 987 this.sliderChangeMode = mode; 988 console.info('【SliderLog】value:' + value + 'mode:' + mode.toString()); 989 }) 990 .contentModifier(new MySliderStyle(this.showSlider, this.sliderChangeMode)) 991 992 } 993 .width('100%') 994 995 }.width('100%') 996 } 997} 998``` 999 1000 1001 1002
