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**<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.| 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 | 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.<br>**NOTE**<br>When **direction** is set to **Axis.Horizontal**, the bubble is displayed right above the slider. When **direction** is set to **Axis.Vertical**, the bubble is displayed on the left of the slider.<br>The drawing area of the bubble is the overlay of the slider.<br>If no margin is set for the slider or the margin is not large enough, the bubble will be clipped.| 51| trackThickness | [Length](ts-types.md#length) | Track thickness of the slider.<br>Since API version 9, this API is supported in ArkTS widgets.| 52 53 54## Events 55 56In addition to the **OnAppear** and **OnDisAppear** universal events, the following events are supported. 57 58| Name| Description| 59| -------- | -------- | 60| 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.| 61 62## SliderChangeMode 63 64Since API version 9, this API is supported in ArkTS widgets. 65 66| Name| Value| Description| 67| -------- | -------- | -------- | 68| Begin | 0 | The user touches or presses the slider with a gesture or mouse.| 69| Moving | 1 | The user is dragging the slider.| 70| End | 2 | The user stops dragging the slider by lifting their finger or releasing the mouse.| 71| Click | 3 | The user moves the slider by touching the slider track.| 72 73 74## Example 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) converts the return value of the slider to an integer. 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 // 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. 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
