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