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**系统能力：** SystemCapability.ArkUI.ArkUI.Full 22 23**参数：** 24 25| 参数名 | 类型 | 必填 | 描述 | 26| ------- | --------------------------------------- | ---- | ------------------ | 27| options | [SliderOptions](#slideroptions对象说明) | 否 | 配置滑动条的参数。 | 28 29## SliderOptions对象说明 30 31| 名称 | 类型 | 必填 | 说明 | 32| -------- | -------- | -------- | -------- | 33| value | number | 否 | 当前进度值。<br/>默认值：与参数min的取值一致。<br />从API version 10开始，该参数支持[$$](../../../quick-start/arkts-two-way-sync.md)双向绑定变量。 | 34| min | number | 否 | 设置最小值。<br/>默认值：0 | 35| max | number | 否 | 设置最大值。<br/>默认值：100<br/>**说明：** <br/>min >= max异常情况，min取默认值0，max取默认值100。<br/>value不在[min, max]范围之内，取min或者max，靠近min取min，靠近max取max。 | 36| step | number | 否 | 设置Slider滑动步长。<br/>默认值：1<br/>取值范围：[0.01, max]<br/>**说明：** <br/>设置小于0的值时，按默认值显示。 | 37| style | [SliderStyle](#sliderstyle枚举说明) | 否 | 设置Slider的滑块与滑轨显示样式。<br/>默认值：SliderStyle.OutSet | 38| direction<sup>8+</sup> | [Axis](ts-appendix-enums.md#axis) | 否 | 设置滑动条滑动方向为水平或竖直方向。<br/>默认值：Axis.Horizontal | 39| reverse<sup>8+</sup> | boolean | 否 | 设置滑动条取值范围是否反向，横向Slider默认为从左往右滑动，竖向Slider默认为从上往下滑动。<br/>默认值：false | 40 41## SliderStyle枚举说明 42 43从API version 9开始，该接口支持在ArkTS卡片中使用。 44 45| 名称 | 描述 | 46| -------- | -------- | 47| OutSet | 滑块在滑轨上。 | 48| InSet | 滑块在滑轨内。 | 49 50## 属性 51 52支持除触摸热区以外的[通用属性](ts-universal-attributes-size.md)。 53 54| 名称 | 参数类型 | 描述 | 55| -------- | -------- | -------- | 56| blockColor | [ResourceColor](ts-types.md#resourcecolor) | 设置滑块的颜色。 <br/>从API version 9开始，该接口支持在ArkTS卡片中使用。<br/>**说明：** <br/>默认值：'#ffffff'。<br/>当滑块形状设置为`SliderBlockType.DEFAULT`时，`blockColor`可设置默认圆形滑块颜色；<br/>当滑块形状设置为`SliderBlockType.IMAGE`时，滑块无填充，设置`blockColor`不生效；<br/>当滑块形状设置为`SliderBlockType.SHAPE`时，`blockColor`可设置自定义形状的填充颜色。 | 57| trackColor | [ResourceColor](ts-types.md#resourcecolor) | 设置滑轨的背景颜色。 <br/>从API version 9开始，该接口支持在ArkTS卡片中使用。<br/>**说明：** <br/>默认值：'#19182431'。| 58| selectedColor | [ResourceColor](ts-types.md#resourcecolor) | 设置滑轨的已滑动部分颜色。<br/>从API version 9开始，该接口支持在ArkTS卡片中使用。<br/>**说明：** <br/>默认值：'#007dff'。 | 59| showSteps | boolean | 设置当前是否显示步长刻度值。<br/>默认值：false <br/>从API version 9开始，该接口支持在ArkTS卡片中使用。| 60| showTips | value: boolean,<br/>content<sup>10+</sup>?: [ResourceStr](ts-types.md#resourcestr) | value：设置滑动时是否显示气泡提示。<br/>默认值：false <br/>content：设置气泡提示的文本内容，默认显示当前百分比。<br/>从API version 9开始，该接口支持在ArkTS卡片中使用。<br/>**说明：** <br/>当direction的值为Axis.Horizontal时，tip显示在滑块正上方。值为Axis.Vertical时，tip显示在滑块正左边。<br/>tip的绘制区域为Slider自身节点的overlay。<br/>Slider不设置边距或者边距比较小时，tip会被截断。| 61| trackThickness<sup>8+</sup> | [Length](ts-types.md#length) | 设置滑轨的粗细。<br/>默认值：当参数style的值设置[SliderStyle](#sliderstyle枚举说明).OutSet 时为 4.0vp，[SliderStyle](#sliderstyle枚举说明).InSet时为20.0vp<br/>从APIversion9开始，该接口支持在ArkTS卡片中使用。<br/>**说明：** <br/>设置为小于等于0的值时，取默认值。 | 62| blockBorderColor<sup>10+</sup> | [ResourceColor](ts-types.md#resourcecolor) | 设置滑块描边颜色。<br/>**说明：** <br/>默认值：'#00000000'。<br/>当滑块形状设置为`SliderBlockType.DEFAULT`时，`blockBorderColor`可设置默认圆形滑块描边颜色；<br/>当滑块形状设置为`SliderBlockType.IMAGE`时，滑块无描边，设置`blockBorderColor`不生效；<br/>当滑块形状设置为`SliderBlockType.SHAPE`时，`blockBorderColor`可设置自定义形状中线的颜色。 | 63| blockBorderWidth<sup>10+</sup> | [Length](ts-types.md#length) | 设置滑块描边粗细。<br/>**说明：** <br/>当滑块形状设置为`SliderBlockType.DEFAULT`时，`blockBorderWidth`可设置默认圆形滑块描边粗细；<br/>当滑块形状设置为`SliderBlockType.IMAGE`时，滑块无描边，设置`blockBorderWidth`不生效；<br/>当滑块形状设置为`SliderBlockType.SHAPE`时，`blockBorderWidth`可设置自定义形状中线的粗细。 | 64| stepColor<sup>10+</sup> | [ResourceColor](ts-types.md#resourcecolor) | 设置刻度颜色。<br/>**说明：** <br/>默认值：'#19182431'。 | 65| trackBorderRadius<sup>10+</sup> | [Length](ts-types.md#length) | 设置底板圆角半径。<br/>**说明：** <br/>默认值：'2vp'。 | 66| blockSize<sup>10+</sup> | [SizeOptions](ts-types.md#sizeoptions) | 设置滑块大小。 <br/>**说明：** <br/>默认值：当参数style的值设置为[SliderStyle](#sliderstyle枚举说明).OutSet 时为：{width: 16, height: 16}，当参数style的值设置为[SliderStyle](#sliderstyle枚举说明).InSet时为：{width: 12, height: 12}。<br/>当设置的bolckSize的宽高值不相等时，取较小值的尺寸，当设置的宽高值中有一个或两个都小于等于0的时候，取默认值。| 67| blockStyle<sup>10+</sup> | [SliderBlockStyle](#sliderblockstyle10对象说明) | 设置滑块形状参数。<br/>**说明：** <br/>默认值：SliderBlockType.DEFAULT，使用圆形滑块。 | 68| stepSize<sup>10+</sup> | [Length](ts-types.md#length) | 设置刻度大小（直径）。 <br/>**说明：** <br/>默认值：'4vp'。<br/>当值为0时，刻度点不显示，当值小于0时，取默认值。| 69| minLabel<sup>deprecated</sup> | string | 设置最小值。<br/>从APIversion9开始废弃，使用min替代。 | 70| maxLabel<sup>deprecated</sup> | string | 设置最大值。<br/>从APIversion9开始废弃，使用max替代。 | 71 72> **说明：** 73> 74> - Slider无默认padding。 75> - 当Slider为水平滑动条时，Slider默认高度为40vp，宽度为父容器的宽度，滑动条居中显示，左右间距为分别为10vp，若设置padding，padding不会覆盖左右间距。 76> - 当Slider为竖直滑动条时，Slider默认宽度为40vp，高度为父容器的高度，滑动条居中显示，上下间距为分别为6vp，若设置padding，padding不会覆盖上下间距。 77 78## SliderBlockStyle<sup>10+</sup>对象说明 79 80Slider组件滑块形状参数。 81 82| 名称 | 类型 | 必填 | 说明 | 83| ----- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 84| type | [SliderBlockType](#sliderblocktype10枚举说明) | 是 | 设置滑块形状。<br/>默认值：SliderBlockType.DEFAULT，使用圆形滑块。 | 85| image | [ResourceStr](ts-types.md#resourcestr) | 否 | 设置滑块图片资源。<br />图片显示区域大小由blockSize属性控制，请勿输入尺寸过大的图片。 | 86| 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) | 否 | 设置滑块使用的自定义形状。 | 87 88## SliderBlockType<sup>10+</sup>枚举说明 89 90Slider组件滑块形状枚举。 91 92| 名称 | 描述 | 93| ------- | ---------------------- | 94| DEFAULT | 使用默认滑块（圆形）。 | 95| IMAGE | 使用图片资源作为滑块。 | 96| SHAPE | 使用自定义形状作为滑块。 | 97 98## 事件 99 100支持[通用事件](ts-universal-events-click.md)外，还支持以下事件： 101 102| 名称 | 功能描述 | 103| -------- | -------- | 104| onChange(callback: (value: number, mode: SliderChangeMode) => void) | Slider拖动或点击时触发事件回调。<br/>value：当前滑动进度值。若返回值有小数，可使用number.toFixed()方法将数据处理为预期的精度。<br/>mode：事件触发的相关状态值。<br/>从API version 9开始，该接口支持在ArkTS卡片中使用。<br/>**说明：** <br/>Begin和End状态当手势点击时都会触发，Moving和Click状态当value值发生变化时触发。<br/>当连贯动作为拖动动作时，不触发Click状态。<br/>value值的变化范围为对应步长steps数组。 | 105 106## SliderChangeMode枚举说明 107 108从API version 9开始，该接口支持在ArkTS卡片中使用。 109 110| 名称 | 值 | 描述 | 111| -------- | -------- | -------- | 112| Begin | 0 | 手势/鼠标接触或者按下滑块。 | 113| Moving | 1 | 正在拖动滑块过程中。 | 114| End | 2 | 手势/鼠标离开滑块。 | 115| Click | 3 | 点击滑动条使滑块位置移动。 | 116 117## 示例 118 119### 示例1 120 121```ts 122// xxx.ets 123@Entry 124@Component 125struct SliderExample { 126 @State outSetValueOne: number = 40 127 @State inSetValueOne: number = 40 128 @State outSetValueTwo: number = 40 129 @State inSetValueTwo: number = 40 130 @State vOutSetValueOne: number = 40 131 @State vInSetValueOne: number = 40 132 @State vOutSetValueTwo: number = 40 133 @State vInSetValueTwo: number = 40 134 135 build() { 136 Column({ space: 8 }) { 137 Text('outset slider').fontSize(9).fontColor(0xCCCCCC).width('90%').margin(15) 138 Row() { 139 Slider({ 140 value: this.outSetValueOne, 141 min: 0, 142 max: 100, 143 style: SliderStyle.OutSet 144 }) 145 .showTips(true) 146 .onChange((value: number, mode: SliderChangeMode) => { 147 this.outSetValueOne = value 148 console.info('value:' + value + 'mode:' + mode.toString()) 149 }) 150 // toFixed(0)将滑动条返回值处理为整数精度 151 Text(this.outSetValueOne.toFixed(0)).fontSize(12) 152 } 153 .width('80%') 154 Row() { 155 Slider({ 156 value: this.outSetValueTwo, 157 step: 10, 158 style: SliderStyle.OutSet 159 }) 160 .showSteps(true) 161 .onChange((value: number, mode: SliderChangeMode) => { 162 this.outSetValueTwo = value 163 console.info('value:' + value + 'mode:' + mode.toString()) 164 }) 165 Text(this.outSetValueTwo.toFixed(0)).fontSize(12) 166 } 167 .width('80%') 168 169 Text('inset slider').fontSize(9).fontColor(0xCCCCCC).width('90%').margin(15) 170 Row() { 171 Slider({ 172 value: this.inSetValueOne, 173 min: 0, 174 max: 100, 175 style: SliderStyle.InSet 176 }) 177 .blockColor('#191970') 178 .trackColor('#ADD8E6') 179 .selectedColor('#4169E1') 180 .showTips(true) 181 .onChange((value: number, mode: SliderChangeMode) => { 182 this.inSetValueOne = value 183 console.info('value:' + value + 'mode:' + mode.toString()) 184 }) 185 Text(this.inSetValueOne.toFixed(0)).fontSize(12) 186 } 187 .width('80%') 188 Row() { 189 Slider({ 190 value: this.inSetValueTwo, 191 step: 10, 192 style: SliderStyle.InSet 193 }) 194 .blockColor('#191970') 195 .trackColor('#ADD8E6') 196 .selectedColor('#4169E1') 197 .showSteps(true) 198 .onChange((value: number, mode: SliderChangeMode) => { 199 this.inSetValueTwo = value 200 console.info('value:' + value + 'mode:' + mode.toString()) 201 }) 202 Text(this.inSetValueTwo.toFixed(0)).fontSize(12) 203 } 204 .width('80%') 205 206 Row() { 207 Column() { 208 Text('vertical outset slider').fontSize(9).fontColor(0xCCCCCC).width('50%').margin(15) 209 Row() { 210 Text().width('10%') 211 Slider({ 212 value: this.vOutSetValueOne, 213 style: SliderStyle.OutSet, 214 direction: Axis.Vertical 215 }) 216 .blockColor('#191970') 217 .trackColor('#ADD8E6') 218 .selectedColor('#4169E1') 219 .showTips(true) 220 .onChange((value: number, mode: SliderChangeMode) => { 221 this.vOutSetValueOne = value 222 console.info('value:' + value + 'mode:' + mode.toString()) 223 }) 224 Slider({ 225 value: this.vOutSetValueTwo, 226 step: 10, 227 style: SliderStyle.OutSet, 228 direction: Axis.Vertical 229 }) 230 .blockColor('#191970') 231 .trackColor('#ADD8E6') 232 .selectedColor('#4169E1') 233 .showSteps(true) 234 .onChange((value: number, mode: SliderChangeMode) => { 235 this.vOutSetValueTwo = value 236 console.info('value:' + value + 'mode:' + mode.toString()) 237 }) 238 } 239 }.width('50%').height(300) 240 241 Column() { 242 Text('vertical inset slider').fontSize(9).fontColor(0xCCCCCC).width('50%').margin(15) 243 Row() { 244 Slider({ 245 value: this.vInSetValueOne, 246 style: SliderStyle.InSet, 247 direction: Axis.Vertical, 248 reverse: true // 竖向的Slider默认是上端是min值，下端是max值，因此想要从下往上滑动，需要设置reverse为true 249 }) 250 .showTips(true) 251 .onChange((value: number, mode: SliderChangeMode) => { 252 this.vInSetValueOne = value 253 console.info('value:' + value + 'mode:' + mode.toString()) 254 }) 255 Slider({ 256 value: this.vInSetValueTwo, 257 step: 10, 258 style: SliderStyle.InSet, 259 direction: Axis.Vertical, 260 reverse: true 261 }) 262 .showSteps(true) 263 .onChange((value: number, mode: SliderChangeMode) => { 264 this.vInSetValueTwo = value 265 console.info('value:' + value + 'mode:' + mode.toString()) 266 }) 267 } 268 }.width('50%').height(300) 269 } 270 }.width('100%') 271 } 272} 273``` 274 275 276 277### 示例2 278 279```ts 280@Entry 281@Component 282struct SliderExample { 283 @State tipsValue: number = 40 284 285 build() { 286 Column({ space: 8 }) { 287 Text('block').fontSize(9).fontColor(0xCCCCCC).margin(15).width('90%') 288 Slider({ style: SliderStyle.OutSet, value: 40 }) 289 .blockSize({ width: 40, height: 40 }) 290 .blockBorderColor(Color.Red) 291 .blockBorderWidth(5) 292 Divider() 293 Text('step').fontSize(9).fontColor(0xCCCCCC).margin(15).width('90%') 294 Slider({ style: SliderStyle.InSet, value: 40, step: 10 }) 295 .showSteps(true) 296 .stepSize(8) 297 .stepColor(Color.Yellow) 298 Divider() 299 Text('track').fontSize(9).fontColor(0xCCCCCC).margin(15).width('90%') 300 Slider({ style: SliderStyle.InSet, value: 40 }) 301 .trackBorderRadius(2) 302 Divider() 303 Text('blockStyle').fontSize(9).fontColor(0xCCCCCC).margin(15).width('90%') 304 Slider({ style: SliderStyle.OutSet, value: 40 }) 305 .blockStyle({ type: SliderBlockType.DEFAULT }) 306 Slider({ style: SliderStyle.OutSet, value: 40 }) 307 .blockStyle({ type: SliderBlockType.IMAGE, image: $r('sys.media.ohos_app_icon') }) 308 Slider({ style: SliderStyle.OutSet, value: 40 }) 309 .blockSize({ width: '60px', height: '60px' }) 310 .blockColor(Color.Red) 311 .blockStyle({ type: SliderBlockType.SHAPE, shape: new Path({ commands: 'M60 60 M30 30 L15 56 L45 56 Z' }) }) 312 Divider() 313 Text('tips').fontSize(9).fontColor(0xCCCCCC).margin(15).width('90%') 314 Slider({ style: SliderStyle.InSet, value: this.tipsValue }) 315 .showTips(true, this.tipsValue.toFixed()) 316 .onChange(value => { 317 this.tipsValue = value 318 }) 319 } 320 } 321} 322``` 323 324
