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_normmal')`<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```ts 586// xxx.ets 587@Entry 588@Component 589struct SliderExample { 590 @State outSetValueOne: number = 40 591 @State inSetValueOne: number = 40 592 @State noneValueOne: number = 40 593 @State outSetValueTwo: number = 40 594 @State inSetValueTwo: number = 40 595 @State vOutSetValueOne: number = 40 596 @State vInSetValueOne: number = 40 597 @State vOutSetValueTwo: number = 40 598 @State vInSetValueTwo: number = 40 599 600 build() { 601 Column({ space: 8 }) { 602 Text('outset slider').fontSize(9).fontColor(0xCCCCCC).width('90%').margin(15) 603 Row() { 604 Slider({ 605 value: this.outSetValueOne, 606 min: 0, 607 max: 100, 608 style: SliderStyle.OutSet 609 }) 610 .showTips(true) 611 .onChange((value: number, mode: SliderChangeMode) => { 612 this.outSetValueOne = value 613 console.info('value:' + value + 'mode:' + mode.toString()) 614 }) 615 // toFixed(0)将滑动条返回值处理为整数精度 616 Text(this.outSetValueOne.toFixed(0)).fontSize(12) 617 } 618 .width('80%') 619 Row() { 620 Slider({ 621 value: this.outSetValueTwo, 622 step: 10, 623 style: SliderStyle.OutSet 624 }) 625 .showSteps(true) 626 .onChange((value: number, mode: SliderChangeMode) => { 627 this.outSetValueTwo = value 628 console.info('value:' + value + 'mode:' + mode.toString()) 629 }) 630 Text(this.outSetValueTwo.toFixed(0)).fontSize(12) 631 } 632 .width('80%') 633 634 Text('inset slider').fontSize(9).fontColor(0xCCCCCC).width('90%').margin(15) 635 Row() { 636 Slider({ 637 value: this.inSetValueOne, 638 min: 0, 639 max: 100, 640 style: SliderStyle.InSet 641 }) 642 .blockColor('#191970') 643 .trackColor('#ADD8E6') 644 .selectedColor('#4169E1') 645 .showTips(true) 646 .onChange((value: number, mode: SliderChangeMode) => { 647 this.inSetValueOne = value 648 console.info('value:' + value + 'mode:' + mode.toString()) 649 }) 650 Text(this.inSetValueOne.toFixed(0)).fontSize(12) 651 } 652 .width('80%') 653 Row() { 654 Slider({ 655 value: this.inSetValueTwo, 656 step: 10, 657 style: SliderStyle.InSet 658 }) 659 .blockColor('#191970') 660 .trackColor('#ADD8E6') 661 .selectedColor('#4169E1') 662 .showSteps(true) 663 .onChange((value: number, mode: SliderChangeMode) => { 664 this.inSetValueTwo = value 665 console.info('value:' + value + 'mode:' + mode.toString()) 666 }) 667 Text(this.inSetValueTwo.toFixed(0)).fontSize(12) 668 } 669 .width('80%') 670 671 Text('none slider').fontSize(9).fontColor(0xCCCCCC).width('90%').margin(15) 672 Row() { 673 Slider({ 674 value: this.noneValueOne, 675 min: 0, 676 max: 100, 677 style: SliderStyle.NONE 678 }) 679 .blockColor('#191970') 680 .trackColor('#ADD8E6') 681 .selectedColor('#4169E1') 682 .showTips(true) 683 .onChange((value: number, mode: SliderChangeMode) => { 684 this.noneValueOne = value 685 console.info('value:' + value + 'mode:' + mode.toString()) 686 }) 687 Text(this.noneValueOne.toFixed(0)).fontSize(12) 688 } 689 .width('80%') 690 691 Row() { 692 Column() { 693 Text('vertical outset slider').fontSize(9).fontColor(0xCCCCCC).width('50%').margin(15) 694 Row() { 695 Text().width('10%') 696 Slider({ 697 value: this.vOutSetValueOne, 698 style: SliderStyle.OutSet, 699 direction: Axis.Vertical 700 }) 701 .blockColor('#191970') 702 .trackColor('#ADD8E6') 703 .selectedColor('#4169E1') 704 .showTips(true) 705 .onChange((value: number, mode: SliderChangeMode) => { 706 this.vOutSetValueOne = value 707 console.info('value:' + value + 'mode:' + mode.toString()) 708 }) 709 Slider({ 710 value: this.vOutSetValueTwo, 711 step: 10, 712 style: SliderStyle.OutSet, 713 direction: Axis.Vertical 714 }) 715 .blockColor('#191970') 716 .trackColor('#ADD8E6') 717 .selectedColor('#4169E1') 718 .showSteps(true) 719 .onChange((value: number, mode: SliderChangeMode) => { 720 this.vOutSetValueTwo = value 721 console.info('value:' + value + 'mode:' + mode.toString()) 722 }) 723 } 724 }.width('50%').height(300) 725 726 Column() { 727 Text('vertical inset slider').fontSize(9).fontColor(0xCCCCCC).width('50%').margin(15) 728 Row() { 729 Slider({ 730 value: this.vInSetValueOne, 731 style: SliderStyle.InSet, 732 direction: Axis.Vertical, 733 reverse: true // 竖向的Slider默认是上端是min值，下端是max值，因此想要从下往上滑动，需要设置reverse为true 734 }) 735 .showTips(true) 736 .onChange((value: number, mode: SliderChangeMode) => { 737 this.vInSetValueOne = value 738 console.info('value:' + value + 'mode:' + mode.toString()) 739 }) 740 Slider({ 741 value: this.vInSetValueTwo, 742 step: 10, 743 style: SliderStyle.InSet, 744 direction: Axis.Vertical, 745 reverse: true 746 }) 747 .showSteps(true) 748 .onChange((value: number, mode: SliderChangeMode) => { 749 this.vInSetValueTwo = value 750 console.info('value:' + value + 'mode:' + mode.toString()) 751 }) 752 } 753 }.width('50%').height(300) 754 } 755 }.width('100%') 756 } 757} 758``` 759 760 761 762### 示例2 763 764```ts 765@Entry 766@Component 767struct SliderExample { 768 @State tipsValue: number = 40 769 770 build() { 771 Column({ space: 8 }) { 772 Text('block').fontSize(9).fontColor(0xCCCCCC).margin(15).width('90%') 773 Slider({ style: SliderStyle.OutSet, value: 40 }) 774 .blockSize({ width: 40, height: 40 }) 775 .blockBorderColor(Color.Red) 776 .blockBorderWidth(5) 777 Divider() 778 Text('step').fontSize(9).fontColor(0xCCCCCC).margin(15).width('90%') 779 Slider({ style: SliderStyle.InSet, value: 40, step: 10 }) 780 .showSteps(true) 781 .stepSize(8) 782 .stepColor(Color.Yellow) 783 Divider() 784 Text('track').fontSize(9).fontColor(0xCCCCCC).margin(15).width('90%') 785 Slider({ style: SliderStyle.InSet, value: 40 }) 786 .trackBorderRadius(2) 787 Divider() 788 Text('selected').fontSize(9).fontColor(0xCCCCCC).margin(15).width('90%') 789 Slider({ style: SliderStyle.InSet, value: 40 }) 790 .selectedBorderRadius(2) 791 Divider() 792 Text('blockStyle').fontSize(9).fontColor(0xCCCCCC).margin(15).width('90%') 793 Slider({ style: SliderStyle.OutSet, value: 40 }) 794 .blockStyle({ type: SliderBlockType.DEFAULT }) 795 Slider({ style: SliderStyle.OutSet, value: 40 }) 796 .blockStyle({ type: SliderBlockType.IMAGE, image: $r('sys.media.ohos_app_icon') }) 797 Slider({ style: SliderStyle.OutSet, value: 40 }) 798 .blockSize({ width: '60px', height: '60px' }) 799 .blockColor(Color.Red) 800 .blockStyle({ type: SliderBlockType.SHAPE, shape: new Path({ commands: 'M60 60 M30 30 L15 56 L45 56 Z' }) }) 801 Divider() 802 Text('tips').fontSize(9).fontColor(0xCCCCCC).margin(15).width('90%') 803 Slider({ style: SliderStyle.InSet, value: this.tipsValue }) 804 .showTips(true, this.tipsValue.toFixed()) 805 .onChange(value => { 806 this.tipsValue = value 807 }) 808 } 809 } 810} 811``` 812 813 814 815 816 817### 示例3 818 819```ts 820// xxx.ets 821//该示例实现了Slider组件通过样式Builder定制内容区。点击增加按钮，进度条会按照原Slider设置的步长增加，反之点减少按钮进度条会减少，并触发原组件的onChange事件。 822@Builder function buildSlider(config: SliderConfiguration) { 823 Row() { 824 Column({space: 30}) { 825 Progress({value: config.value, total: config.max, type:ProgressType.Ring}) 826 .margin({ top:20 }) 827 828 Button('增加').onClick(() => { 829 config.value = config.value + config.step 830 config.triggerChange(config.value, SliderChangeMode.Click) 831 }) 832 .width(100) 833 .height(25) 834 .fontSize(10) 835 .enabled(config.value<config.max) 836 837 Button('减少').onClick(() => { 838 config.value=config.value-config.step 839 config.triggerChange(config.value, SliderChangeMode.Click) 840 }) 841 .width(100) 842 .height(25) 843 .fontSize(10) 844 .enabled(config.value>config.min) 845 846 Slider({ 847 value: config.value, 848 min: config.min, 849 max: config.max, 850 step:config.step, 851 }) 852 .width(config.max) 853 .visibility((config.contentModifier as MySliderStyle).showSlider?Visibility.Visible:Visibility.Hidden) 854 .showSteps(true) 855 .onChange((value: number, mode: SliderChangeMode) => { 856 config.triggerChange(value, mode) 857 }) 858 Text('当前状态：'+ ((config.contentModifier as MySliderStyle).sliderChangeMode==0?"Begin" 859 :((config.contentModifier as MySliderStyle).sliderChangeMode==1?"Moving" 860 :((config.contentModifier as MySliderStyle).sliderChangeMode==2?"End" 861 :((config.contentModifier as MySliderStyle).sliderChangeMode==3?"Click":"无"))))) 862 .fontSize(10) 863 Text('进度值：'+ config.value) 864 .fontSize(10) 865 Text('最小值：'+ config.min) 866 .fontSize(10) 867 Text('最大值：'+ config.max) 868 .fontSize(10) 869 Text('步长：'+ config.step) 870 .fontSize(10) 871 } 872 .width('80%') 873 874 } 875 .width('100%') 876} 877 878class MySliderStyle implements ContentModifier<SliderConfiguration> { 879 showSlider:boolean=true 880 sliderChangeMode:number=0 881 constructor(showSlider: boolean,sliderChangeMode:number) { 882 this.showSlider = showSlider 883 this.sliderChangeMode = sliderChangeMode 884 } 885 applyContent() : WrappedBuilder<[SliderConfiguration]> { 886 return wrapBuilder(buildSlider) 887 } 888} 889 890 891@Entry 892@Component 893struct SliderExample { 894 @State showSlider:boolean=true 895 @State sliderValue: number = 0 896 @State sliderMin: number = 10 897 @State sliderMax: number = 100 898 @State sliderStep: number = 20 899 @State sliderChangeMode: number = 0 900 901 build() { 902 Column({ space: 8 }) { 903 904 Row() { 905 Slider({ 906 value: this.sliderValue, 907 min: this.sliderMin, 908 max: this.sliderMax, 909 step:this.sliderStep, 910 }) 911 .showSteps(true) 912 .onChange((value: number, mode: SliderChangeMode) => { 913 this.sliderValue = value 914 this.sliderChangeMode=mode 915 console.info('【SliderLog】value:' + value + 'mode:' + mode.toString()) 916 }) 917 .contentModifier(new MySliderStyle(this.showSlider,this.sliderChangeMode)) 918 919 } 920 .width('100%') 921 922 }.width('100%') 923 } 924} 925``` 926 927 928 929
