1# Slider 2 3滑动条组件，通常用于快速调节设置值，如音量调节、亮度调节等应用场景。 4 5> **说明：** 6> 7> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 8 9 10## 子组件 11 12无 13 14 15## 接口 16 17Slider(options?: {value?: number, min?: number, max?: number, step?: number, style?: SliderStyle, direction?: Axis, reverse?: boolean}) 18 19从API version 9开始，该接口支持在ArkTS卡片中使用。 20 21**参数：** 22 23| 参数名 | 参数类型 | 必填 | 参数描述 | 24| -------- | -------- | -------- | -------- | 25| value | number | 否 | 当前进度值。<br/>默认值：0 | 26| min | number | 否 | 设置最小值。<br/>默认值：0 | 27| max | number | 否 | 设置最大值。<br/>默认值：100<br/>**说明：** <br/>min >= max异常情况，min取默认值0，max取默认值100。<br/>value不在[min, max]范围之内，取min/max，靠近min取min，靠近max取max。 | 28| step | number | 否 | 设置Slider滑动步长。<br/>默认值：1<br/>取值范围：[0.01, max]<br/>**说明：** <br/>设置小于0或百分比的值时，按默认值显示。 | 29| style | [SliderStyle](#sliderstyle枚举说明) | 否 | 设置Slider的滑块与滑轨显示样式。<br/>默认值：SliderStyle.OutSet | 30| direction<sup>8+</sup> | [Axis](ts-appendix-enums.md#axis) | 否 | 设置滑动条滑动方向为水平或竖直方向。<br/>默认值：Axis.Horizontal | 31| reverse<sup>8+</sup> | boolean | 否 | 设置滑动条取值范围是否反向，横向Slider默认为从左往右滑动，竖向Slider默认为从上往下滑动。<br/>默认值：false | 32 33## SliderStyle枚举说明 34 35从API version 9开始，该接口支持在ArkTS卡片中使用。 36 37| 名称 | 描述 | 38| -------- | -------- | 39| OutSet | 滑块在滑轨上。 | 40| InSet | 滑块在滑轨内。 | 41 42支持除触摸热区以外的通用属性设置。 43 44| 名称 | 参数类型 | 描述 | 45| -------- | -------- | -------- | 46| blockColor | [ResourceColor](ts-types.md#resourcecolor) | 设置滑块的颜色。 <br/>从API version 9开始，该接口支持在ArkTS卡片中使用。| 47| trackColor | [ResourceColor](ts-types.md#resourcecolor) | 设置滑轨的背景颜色。 <br/>从API version 9开始，该接口支持在ArkTS卡片中使用。| 48| selectedColor | [ResourceColor](ts-types.md#resourcecolor) | 设置滑轨的已滑动部分颜色。<br/>从API version 9开始，该接口支持在ArkTS卡片中使用。 | 49| showSteps | boolean | 设置当前是否显示步长刻度值。<br/>默认值：false <br/>从API version 9开始，该接口支持在ArkTS卡片中使用。| 50| showTips | boolean | 设置滑动时是否显示百分比气泡提示。<br/>默认值：false <br/>从API version 9开始，该接口支持在ArkTS卡片中使用。<br/>**说明：** <br/>当direction的属性值为Axis.Horizontal时，tip显示在滑块正上方。值为Axis.Vertical时，tip显示在滑块正左边。<br/>tip的绘制区域为Slider自身节点的overlay。<br/>Slider不设置边距，或者边距比较小时，tip会被截断。 | 51| trackThickness | [Length](ts-types.md#length) | 设置滑轨的粗细。<br/>默认值：当参数style的值设置[SliderStyle](#sliderstyle枚举说明).OutSet 时为 4.0vp，[SliderStyle](#sliderstyle枚举说明).InSet时为20.0vp<br/>从APIversion9开始，该接口支持在ArkTS卡片中使用。<br/>**说明：** <br/>设置为小于0的值时，按默认值显示。 | 52 53 54## 事件 55 56通用事件仅支持挂载卸载事件：OnAppear，OnDisAppear。 57 58| 名称 | 功能描述 | 59| -------- | -------- | 60| 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数组。 | 61 62## SliderChangeMode枚举说明 63 64从API version 9开始，该接口支持在ArkTS卡片中使用。 65 66| 名称 | 值 | 描述 | 67| -------- | -------- | -------- | 68| Begin | 0 | 手势/鼠标接触或者按下滑块。 | 69| Moving | 1 | 正在拖动滑块过程中。 | 70| End | 2 | 手势/鼠标离开滑块。 | 71| Click | 3 | 点击滑动条使滑块位置移动。 | 72 73 74## 示例 75 76```ts 77// xxx.ets 78@Entry 79@Component 80struct SliderExample { 81 @State outSetValueOne: number = 40 82 @State inSetValueOne: number = 40 83 @State outSetValueTwo: number = 40 84 @State inSetValueTwo: number = 40 85 @State vOutSetValueOne: number = 40 86 @State vInSetValueOne: number = 40 87 @State vOutSetValueTwo: number = 40 88 @State vInSetValueTwo: number = 40 89 90 build() { 91 Column({ space: 8 }) { 92 Text('outset slider').fontSize(9).fontColor(0xCCCCCC).width('90%').margin(15) 93 Row() { 94 Slider({ 95 value: this.outSetValueOne, 96 min: 0, 97 max: 100, 98 style: SliderStyle.OutSet 99 }) 100 .showTips(true) 101 .onChange((value: number, mode: SliderChangeMode) => { 102 this.outSetValueOne = value 103 console.info('value:' + value + 'mode:' + mode.toString()) 104 }) 105 // toFixed(0)将滑动条返回值处理为整数精度 106 Text(this.outSetValueOne.toFixed(0)).fontSize(12) 107 } 108 .width('80%') 109 Row() { 110 Slider({ 111 value: this.outSetValueTwo, 112 step: 10, 113 style: SliderStyle.OutSet 114 }) 115 .showSteps(true) 116 .onChange((value: number, mode: SliderChangeMode) => { 117 this.outSetValueTwo = value 118 console.info('value:' + value + 'mode:' + mode.toString()) 119 }) 120 Text(this.outSetValueTwo.toFixed(0)).fontSize(12) 121 } 122 .width('80%') 123 124 Text('inset slider').fontSize(9).fontColor(0xCCCCCC).width('90%').margin(15) 125 Row() { 126 Slider({ 127 value: this.inSetValueOne, 128 min: 0, 129 max: 100, 130 style: SliderStyle.InSet 131 }) 132 .blockColor('#191970') 133 .trackColor('#ADD8E6') 134 .selectedColor('#4169E1') 135 .showTips(true) 136 .onChange((value: number, mode: SliderChangeMode) => { 137 this.inSetValueOne = value 138 console.info('value:' + value + 'mode:' + mode.toString()) 139 }) 140 Text(this.inSetValueOne.toFixed(0)).fontSize(12) 141 } 142 .width('80%') 143 Row() { 144 Slider({ 145 value: this.inSetValueTwo, 146 step: 10, 147 style: SliderStyle.InSet 148 }) 149 .blockColor('#191970') 150 .trackColor('#ADD8E6') 151 .selectedColor('#4169E1') 152 .showSteps(true) 153 .onChange((value: number, mode: SliderChangeMode) => { 154 this.inSetValueTwo = value 155 console.info('value:' + value + 'mode:' + mode.toString()) 156 }) 157 Text(this.inSetValueTwo.toFixed(0)).fontSize(12) 158 } 159 .width('80%') 160 161 Row() { 162 Column() { 163 Text('vertical outset slider').fontSize(9).fontColor(0xCCCCCC).width('50%').margin(15) 164 Row() { 165 Slider({ 166 value: this.vOutSetValueOne, 167 style: SliderStyle.OutSet, 168 direction: Axis.Vertical 169 }) 170 .blockColor('#191970') 171 .trackColor('#ADD8E6') 172 .selectedColor('#4169E1') 173 .showTips(true) 174 .onChange((value: number, mode: SliderChangeMode) => { 175 this.vOutSetValueOne = value 176 console.info('value:' + value + 'mode:' + mode.toString()) 177 }) 178 Slider({ 179 value: this.vOutSetValueTwo, 180 step: 10, 181 style: SliderStyle.OutSet, 182 direction: Axis.Vertical 183 }) 184 .blockColor('#191970') 185 .trackColor('#ADD8E6') 186 .selectedColor('#4169E1') 187 .showSteps(true) 188 .onChange((value: number, mode: SliderChangeMode) => { 189 this.vOutSetValueTwo = value 190 console.info('value:' + value + 'mode:' + mode.toString()) 191 }) 192 } 193 }.width('50%').height(300) 194 195 Column() { 196 Text('vertical inset slider').fontSize(9).fontColor(0xCCCCCC).width('50%').margin(15) 197 Row() { 198 Slider({ 199 value: this.vInSetValueOne, 200 style: SliderStyle.InSet, 201 direction: Axis.Vertical, 202 reverse: true // 竖向的Slider默认是上端是min值，下端是max值，因此想要从下往上滑动，需要设置reverse为true 203 }) 204 .showTips(true) 205 .onChange((value: number, mode: SliderChangeMode) => { 206 this.vInSetValueOne = value 207 console.info('value:' + value + 'mode:' + mode.toString()) 208 }) 209 Slider({ 210 value: this.vInSetValueTwo, 211 step: 10, 212 style: SliderStyle.InSet, 213 direction: Axis.Vertical, 214 reverse: true 215 }) 216 .showSteps(true) 217 .onChange((value: number, mode: SliderChangeMode) => { 218 this.vInSetValueTwo = value 219 console.info('value:' + value + 'mode:' + mode.toString()) 220 }) 221 } 222 }.width('50%').height(300) 223 } 224 }.width('100%') 225 } 226} 227``` 228 229 230
