1# Slider 2 3The **\<Slider>** component is used to quickly adjust settings, such as the volume and brightness. 4 5> **NOTE** 6> 7> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. 8 9 10## Child Components 11 12Not supported 13 14 15## APIs 16 17Slider(options?: {value?: number, min?: number, max?: number, step?: number, style?: SliderStyle, direction?: Axis, reverse?: boolean}) 18 19Since API version 9, this API is supported in ArkTS widgets. 20 21**Parameters** 22 23| Name| Type| Mandatory| Description| 24| -------- | -------- | -------- | -------- | 25| value | number | No| Current progress.<br>Default value: value of **min**<br>Since API version 10, this parameter supports [$$](../../quick-start/arkts-two-way-sync.md) for two-way binding of variables.| 26| min | number | No| Minimum value.<br>Default value: **0**| 27| max | number | No| Maximum value.<br>Default value: **100**<br>**NOTE**<br>If the value of **min** is greater than or equal to the value of **max**, the default value **0** is used for **min** and the default value **100** is used for **max**.<br>If the value is not within the [min, max] range, the value of **min** or **max**, whichever is closer.| 28| step | number | No| Step of the slider.<br>Default value: **1**<br>Value range: [0.01, max]<br>**NOTE**<br>If this parameter is set to a value less than 0 or a percentage, the default value is used.| 29| style | [SliderStyle](#sliderstyle) | No| Style of the slider thumb and track.<br>Default value: **SliderStyle.OutSet**| 30| direction<sup>8+</sup> | [Axis](ts-appendix-enums.md#axis) | No| Whether the slider moves horizontally or vertically.<br>Default value: **Axis.Horizontal**| 31| reverse<sup>8+</sup> | boolean | No| Whether the slider values are reversed. By default, the values increase from left to right for a horizontal slider and from top to bottom for a vertical slider.<br>Default value: **false**| 32 33## SliderStyle 34 35Since API version 9, this API is supported in ArkTS widgets. 36 37| Name| Description| 38| -------- | -------- | 39| OutSet | The slider is on the slider track.| 40| InSet | The slider is in the slider track.| 41 42Except touch target attributes, the universal attributes are supported. 43 44| Name| Type| Description| 45| -------- | -------- | -------- | 46| blockColor | [ResourceColor](ts-types.md#resourcecolor) | Color of the slider.<br>Since API version 9, this API is supported in ArkTS widgets.<br>**NOTE**<br>When **SliderBlockType.DEFAULT** is used, **blockColor** sets the color of the round slider.<br>When **SliderBlockType.IMAGE** is used, `blockColor` does not work as the slider has no fill color.<br>When **SliderBlockType.SHAPE** is used, **blockColor** sets the color of the slider in a custom shape.| 47| trackColor | [ResourceColor](ts-types.md#resourcecolor) | Background color of the slider.<br>Since API version 9, this API is supported in ArkTS widgets.| 48| selectedColor | [ResourceColor](ts-types.md#resourcecolor) | Color of the selected part of the slider track.<br>Since API version 9, this API is supported in ArkTS widgets.| 49| showSteps | boolean | Whether to display the current step.<br>Default value: **false**<br>Since API version 9, this API is supported in ArkTS widgets.| 50| showTips | value: boolean,<br>content<sup>10+</sup>?: [ResourceStr](ts-types.md#resourcestr) | **value**: whether to display a tooltip when the user drags the slider.<br>Default value: **false**<br>**content**: text content of the tooltip. The default value is the current percentage.<br>Since API version 9, this API is supported in ArkTS widgets.<br>**NOTE**<br>When **direction** is set to **Axis.Horizontal**, the tooltip is displayed right above the slider. When **direction** is set to **Axis.Vertical**, the tooltip is displayed on the left of the slider.<br>The drawing area of the tooltip is the overlay of the slider.<br>If no margin is set for the slider or the margin is not large enough, the tooltip will be clipped.| 51| trackThickness | [Length](ts-types.md#length) | Track thickness of the slider.<br>Default value: **4.0vp** when **style** is set to **[SliderStyle](#sliderstyle).OutSet**; **20.0vp** when **style** is set to **[SliderStyle](#sliderstyle).InSet**<br>Since API version 9, this API is supported in ArkTS widgets.<br>**NOTE**<br>A value less than or equal to 0 evaluates to the default value.| 52| blockBorderColor<sup>10+</sup> | [ResourceColor](ts-types.md#resourcecolor) | Border color of the slider in the block direction.<br>**NOTE**<br>When **SliderBlockType.DEFAULT** is used, **blockBorderColor** sets the border color of the round slider.<br>When **SliderBlockType.IMAGE** is used, **blockBorderColor** does not work as the slider has no border.<br>When **SliderBlockType.SHAPE** is used, **blockBorderColor** sets the border color of the slider in a custom shape.| 53| blockBorderWidth<sup>10+</sup> | [Length](ts-types.md#length) | Border width of the slider in the block direction.<br>**NOTE**<br>When **SliderBlockType.DEFAULT** is used, **blockBorderWidth** sets the border width of the round slider.<br>When **SliderBlockType.IMAGE** is used, **blockBorderWidth** does not work as the slider has no border.<br>WWhen **SliderBlockType.SHAPE** is used, **blockBorderWidth** sets the border width of the slider in a custom shape.| 54| stepColor<sup>10+</sup> | [ResourceColor](ts-types.md#resourcecolor) | Step color.| 55| trackBorderRadius<sup>10+</sup> | [Length](ts-types.md#length) | Radius of the rounded corner of the slider track.| 56| blockSize<sup>10+</sup> | [SizeOptions](ts-types.md#sizeoptions) | Size of the slider in the block direction.| 57| blockStyle<sup>10+</sup> | [SliderBlockStyle](#sliderblockstyle10) | Style of the slider in the block direction.| 58| stepSize<sup>10+</sup> | [Length](ts-types.md#length) | Step size (diameter).| 59 60## SliderBlockStyle<sup>10+</sup> 61 62Describes the style of the slider in the block direction. 63 64| Name | Type | Mandatory| Description | 65| ----- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 66| type | [SliderBlockType](#sliderblocktype10) | Yes | Type of the slider in the block direction.<br>Default value: **SliderBlockType.DEFAULT**, indicating the round slider.| 67| image | [ResourceStr](ts-types.md#resourcestr) | No | Image resource of the slider.<br>The area size for displaying the image is subject to the **blockSize** attribute. Be mindful of the image size when selecting an image.| 68| 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) | No | Custom shape of the slider. | 69 70## SliderBlockType<sup>10+</sup> 71 72Enumerates the types of the slider in the block direction. 73 74| Name | Description | 75| ------- | ---------------------- | 76| DEFAULT | Round slider. | 77| IMAGE | Slider with an image background. | 78| SHAPE | Slider in a custom shape.| 79 80## Events 81 82In addition to the [universal events](ts-universal-events-click.md), the following attributes are supported. 83 84| Name| Description| 85| -------- | -------- | 86| onChange(callback: (value: number, mode: SliderChangeMode) => void) | Invoked when the slider is dragged or clicked.<br>**value**: current slider value. If the return value contains decimals, you can use the **number.toFixed()** API to process the data to the expected precision.<br>**mode**: state triggered by the event.<br>Since API version 9, this API is supported in ArkTS widgets.<br>**NOTE**<br>The **Begin** and **End** states are triggered when the slider is clicked with a gesture. The **Moving** and **Click** states are triggered when the value of **value** changes.<br>If the coherent action is a drag action, the **Click** state will not be triggered.<br>The value range of **value** is the **steps** value array.| 87 88## SliderChangeMode 89 90Since API version 9, this API is supported in ArkTS widgets. 91 92| Name| Value| Description| 93| -------- | -------- | -------- | 94| Begin | 0 | The user touches or presses the slider with a gesture or mouse.| 95| Moving | 1 | The user is dragging the slider.| 96| End | 2 | The user stops dragging the slider by lifting their finger or releasing the mouse.| 97| Click | 3 | The user moves the slider by touching the slider track.| 98 99## Example 100 101### Example 1 102 103```ts 104// xxx.ets 105@Entry 106@Component 107struct SliderExample { 108 @State outSetValueOne: number = 40 109 @State inSetValueOne: number = 40 110 @State outSetValueTwo: number = 40 111 @State inSetValueTwo: number = 40 112 @State vOutSetValueOne: number = 40 113 @State vInSetValueOne: number = 40 114 @State vOutSetValueTwo: number = 40 115 @State vInSetValueTwo: number = 40 116 117 build() { 118 Column({ space: 8 }) { 119 Text('outset slider').fontSize(9).fontColor(0xCCCCCC).width('90%').margin(15) 120 Row() { 121 Slider({ 122 value: this.outSetValueOne, 123 min: 0, 124 max: 100, 125 style: SliderStyle.OutSet 126 }) 127 .showTips(true) 128 .onChange((value: number, mode: SliderChangeMode) => { 129 this.outSetValueOne = value 130 console.info('value:' + value + 'mode:' + mode.toString()) 131 }) 132 // toFixed(0) converts the return value of the slider to an integer. 133 Text(this.outSetValueOne.toFixed(0)).fontSize(12) 134 } 135 .width('80%') 136 Row() { 137 Slider({ 138 value: this.outSetValueTwo, 139 step: 10, 140 style: SliderStyle.OutSet 141 }) 142 .showSteps(true) 143 .onChange((value: number, mode: SliderChangeMode) => { 144 this.outSetValueTwo = value 145 console.info('value:' + value + 'mode:' + mode.toString()) 146 }) 147 Text(this.outSetValueTwo.toFixed(0)).fontSize(12) 148 } 149 .width('80%') 150 151 Text('inset slider').fontSize(9).fontColor(0xCCCCCC).width('90%').margin(15) 152 Row() { 153 Slider({ 154 value: this.inSetValueOne, 155 min: 0, 156 max: 100, 157 style: SliderStyle.InSet 158 }) 159 .blockColor('#191970') 160 .trackColor('#ADD8E6') 161 .selectedColor('#4169E1') 162 .showTips(true) 163 .onChange((value: number, mode: SliderChangeMode) => { 164 this.inSetValueOne = value 165 console.info('value:' + value + 'mode:' + mode.toString()) 166 }) 167 Text(this.inSetValueOne.toFixed(0)).fontSize(12) 168 } 169 .width('80%') 170 Row() { 171 Slider({ 172 value: this.inSetValueTwo, 173 step: 10, 174 style: SliderStyle.InSet 175 }) 176 .blockColor('#191970') 177 .trackColor('#ADD8E6') 178 .selectedColor('#4169E1') 179 .showSteps(true) 180 .onChange((value: number, mode: SliderChangeMode) => { 181 this.inSetValueTwo = value 182 console.info('value:' + value + 'mode:' + mode.toString()) 183 }) 184 Text(this.inSetValueTwo.toFixed(0)).fontSize(12) 185 } 186 .width('80%') 187 188 Row() { 189 Column() { 190 Text('vertical outset slider').fontSize(9).fontColor(0xCCCCCC).width('50%').margin(15) 191 Row() { 192 Slider({ 193 value: this.vOutSetValueOne, 194 style: SliderStyle.OutSet, 195 direction: Axis.Vertical 196 }) 197 .blockColor('#191970') 198 .trackColor('#ADD8E6') 199 .selectedColor('#4169E1') 200 .showTips(true) 201 .onChange((value: number, mode: SliderChangeMode) => { 202 this.vOutSetValueOne = value 203 console.info('value:' + value + 'mode:' + mode.toString()) 204 }) 205 Slider({ 206 value: this.vOutSetValueTwo, 207 step: 10, 208 style: SliderStyle.OutSet, 209 direction: Axis.Vertical 210 }) 211 .blockColor('#191970') 212 .trackColor('#ADD8E6') 213 .selectedColor('#4169E1') 214 .showSteps(true) 215 .onChange((value: number, mode: SliderChangeMode) => { 216 this.vOutSetValueTwo = value 217 console.info('value:' + value + 'mode:' + mode.toString()) 218 }) 219 } 220 }.width('50%').height(300) 221 222 Column() { 223 Text('vertical inset slider').fontSize(9).fontColor(0xCCCCCC).width('50%').margin(15) 224 Row() { 225 Slider({ 226 value: this.vInSetValueOne, 227 style: SliderStyle.InSet, 228 direction: Axis.Vertical, 229 reverse: true // By default, at the top of the vertical slider is the min value and at the bottom is the max value. Therefore, if you want to slide from bottom to top, set reverse to true. 230 }) 231 .showTips(true) 232 .onChange((value: number, mode: SliderChangeMode) => { 233 this.vInSetValueOne = value 234 console.info('value:' + value + 'mode:' + mode.toString()) 235 }) 236 Slider({ 237 value: this.vInSetValueTwo, 238 step: 10, 239 style: SliderStyle.InSet, 240 direction: Axis.Vertical, 241 reverse: true 242 }) 243 .showSteps(true) 244 .onChange((value: number, mode: SliderChangeMode) => { 245 this.vInSetValueTwo = value 246 console.info('value:' + value + 'mode:' + mode.toString()) 247 }) 248 } 249 }.width('50%').height(300) 250 } 251 }.width('100%') 252 } 253} 254``` 255 256 257 258### Example 2 259 260```ts 261@Entry 262@Component 263struct SliderExample { 264 @State tipsValue: number = 40 265 266 build() { 267 Column({ space: 8 }) { 268 Text('block').fontSize(9).fontColor(0xCCCCCC).margin(15).width('90%') 269 Slider({ style: SliderStyle.OutSet, value: 40 }) 270 .blockSize({ width: 40, height: 40 }) 271 .blockBorderColor(Color.Red) 272 .blockBorderWidth(5) 273 Divider() 274 Text('step').fontSize(9).fontColor(0xCCCCCC).margin(15).width('90%') 275 Slider({ style: SliderStyle.InSet, value: 40, step: 10 }) 276 .showSteps(true) 277 .stepSize(8) 278 .stepColor(Color.Yellow) 279 Divider() 280 Text('track').fontSize(9).fontColor(0xCCCCCC).margin(15).width('90%') 281 Slider({ style: SliderStyle.InSet, value: 40 }) 282 .trackBorderRadius(2) 283 Divider() 284 Text('blockStyle').fontSize(9).fontColor(0xCCCCCC).margin(15).width('90%') 285 Slider({ style: SliderStyle.OutSet, value: 40 }) 286 .blockStyle({ type: SliderBlockType.DEFAULT }) 287 Slider({ style: SliderStyle.OutSet, value: 40 }) 288 .blockStyle({ type: SliderBlockType.IMAGE, image: $r('sys.media.ohos_app_icon') }) 289 Slider({ style: SliderStyle.OutSet, value: 40 }) 290 .blockSize({ width: '60px', height: '60px' }) 291 .blockColor(Color.Red) 292 .blockStyle({ type: SliderBlockType.SHAPE, shape: new Path({ commands: 'M60 60 M30 30 L15 56 L45 56 Z' }) }) 293 Divider() 294 Text('tips').fontSize(9).fontColor(0xCCCCCC).margin(15).width('90%') 295 Slider({ style: SliderStyle.InSet, value: this.tipsValue }) 296 .showTips(true, 'value:' + this.tipsValue.toFixed()) 297 .onChange(value => { 298 this.tipsValue = value 299 }) 300 } 301 } 302} 303``` 304 305 306
