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