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: **0**| 26| min | number | No| Minimum value.<br>Default value: **0**| 27| max | number | No| Maximum value.<br>Default value: **100**| 28| step | number | No| Step of the slider.<br>Default value: **1**<br>Value range: [0.01, max]| 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 42 43## Attributes 44 45Except touch target attributes, the universal attributes are supported. 46 47| Name| Type| Description| 48| -------- | -------- | -------- | 49| blockColor | [ResourceColor](ts-types.md#resourcecolor) | Color of the slider.<br>Since API version 9, this API is supported in ArkTS widgets.| 50| trackColor | [ResourceColor](ts-types.md#resourcecolor) | Background color of the slider.<br>Since API version 9, this API is supported in ArkTS widgets.| 51| 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.| 52| showSteps | boolean | Whether to display the current step.<br>Default value: **false**<br>Since API version 9, this API is supported in ArkTS widgets.| 53| showTips | boolean | Whether to display a bubble to indicate the percentage when the user drags the slider.<br>Default value: **false**<br>Since API version 9, this API is supported in ArkTS widgets.| 54| trackThickness | [Length](ts-types.md#length) | Track thickness of the slider.<br>Since API version 9, this API is supported in ArkTS widgets.| 55 56 57## Events 58 59In addition to the **OnAppear** and **OnDisAppear** universal events, the following events are supported. 60 61| Name| Description| 62| -------- | -------- | 63| onChange(callback: (value: number, mode: SliderChangeMode) => void) | Invoked when the slider slides.<br>**value**: current slider value. If the return value contains decimals, you can use **Math.toFixed()** to process the data to the desired precision.<br>**mode**: dragging state.<br>Since API version 9, this API is supported in ArkTS widgets.| 64 65## SliderChangeMode 66 67Since API version 9, this API is supported in ArkTS widgets. 68 69| Name| Value| Description| 70| -------- | -------- | -------- | 71| Begin | 0 | The user starts to drag the slider.| 72| Moving | 1 | The user is dragging the slider.| 73| End | 2 | The user stops dragging the slider.| 74| Click | 3 | The user moves the slider by touching the slider track.| 75 76 77## Example 78 79```ts 80// xxx.ets 81@Entry 82@Component 83struct SliderExample { 84 @State outSetValueOne: number = 40 85 @State inSetValueOne: number = 40 86 @State outSetValueTwo: number = 40 87 @State inSetValueTwo: number = 40 88 @State vOutSetValueOne: number = 40 89 @State vInSetValueOne: number = 40 90 @State vOutSetValueTwo: number = 40 91 @State vInSetValueTwo: number = 40 92 93 build() { 94 Column({ space: 8 }) { 95 Text('outset slider').fontSize(9).fontColor(0xCCCCCC).width('90%').margin(15) 96 Row() { 97 Slider({ 98 value: this.outSetValueOne, 99 min: 0, 100 max: 100, 101 style: SliderStyle.OutSet 102 }) 103 .showTips(true) 104 .onChange((value: number, mode: SliderChangeMode) => { 105 this.outSetValueOne = value 106 console.info('value:' + value + 'mode:' + mode.toString()) 107 }) 108 // toFixed(0) converts the return value of the slider to an integer. 109 Text(this.outSetValueOne.toFixed(0)).fontSize(12) 110 } 111 .width('80%') 112 Row() { 113 Slider({ 114 value: this.outSetValueTwo, 115 step: 10, 116 style: SliderStyle.OutSet 117 }) 118 .showSteps(true) 119 .onChange((value: number, mode: SliderChangeMode) => { 120 this.outSetValueTwo = value 121 console.info('value:' + value + 'mode:' + mode.toString()) 122 }) 123 Text(this.outSetValueTwo.toFixed(0)).fontSize(12) 124 } 125 .width('80%') 126 127 Text('inset slider').fontSize(9).fontColor(0xCCCCCC).width('90%').margin(15) 128 Row() { 129 Slider({ 130 value: this.inSetValueOne, 131 min: 0, 132 max: 100, 133 style: SliderStyle.InSet 134 }) 135 .blockColor('#191970') 136 .trackColor('#ADD8E6') 137 .selectedColor('#4169E1') 138 .showTips(true) 139 .onChange((value: number, mode: SliderChangeMode) => { 140 this.inSetValueOne = value 141 console.info('value:' + value + 'mode:' + mode.toString()) 142 }) 143 Text(this.inSetValueOne.toFixed(0)).fontSize(12) 144 } 145 .width('80%') 146 Row() { 147 Slider({ 148 value: this.inSetValueTwo, 149 step: 10, 150 style: SliderStyle.InSet 151 }) 152 .blockColor('#191970') 153 .trackColor('#ADD8E6') 154 .selectedColor('#4169E1') 155 .showSteps(true) 156 .onChange((value: number, mode: SliderChangeMode) => { 157 this.inSetValueTwo = value 158 console.info('value:' + value + 'mode:' + mode.toString()) 159 }) 160 Text(this.inSetValueTwo.toFixed(0)).fontSize(12) 161 } 162 .width('80%') 163 164 Row() { 165 Column() { 166 Text('vertical outset slider').fontSize(9).fontColor(0xCCCCCC).width('50%').margin(15) 167 Row() { 168 Slider({ 169 value: this.vOutSetValueOne, 170 style: SliderStyle.OutSet, 171 direction: Axis.Vertical 172 }) 173 .blockColor('#191970') 174 .trackColor('#ADD8E6') 175 .selectedColor('#4169E1') 176 .showTips(true) 177 .onChange((value: number, mode: SliderChangeMode) => { 178 this.vOutSetValueOne = value 179 console.info('value:' + value + 'mode:' + mode.toString()) 180 }) 181 Slider({ 182 value: this.vOutSetValueTwo, 183 step: 10, 184 style: SliderStyle.OutSet, 185 direction: Axis.Vertical 186 }) 187 .blockColor('#191970') 188 .trackColor('#ADD8E6') 189 .selectedColor('#4169E1') 190 .showSteps(true) 191 .onChange((value: number, mode: SliderChangeMode) => { 192 this.vOutSetValueTwo = value 193 console.info('value:' + value + 'mode:' + mode.toString()) 194 }) 195 } 196 }.width('50%').height(300) 197 198 Column() { 199 Text('vertical inset slider').fontSize(9).fontColor(0xCCCCCC).width('50%').margin(15) 200 Row() { 201 Slider({ 202 value: this.vInSetValueOne, 203 style: SliderStyle.InSet, 204 direction: Axis.Vertical, 205 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. 206 }) 207 .showTips(true) 208 .onChange((value: number, mode: SliderChangeMode) => { 209 this.vInSetValueOne = value 210 console.info('value:' + value + 'mode:' + mode.toString()) 211 }) 212 Slider({ 213 value: this.vInSetValueTwo, 214 step: 10, 215 style: SliderStyle.InSet, 216 direction: Axis.Vertical, 217 reverse: true 218 }) 219 .showSteps(true) 220 .onChange((value: number, mode: SliderChangeMode) => { 221 this.vInSetValueTwo = value 222 console.info('value:' + value + 'mode:' + mode.toString()) 223 }) 224 } 225 }.width('50%').height(300) 226 } 227 }.width('100%') 228 } 229} 230``` 231 232 233
