1# @ohos.multimedia.avVolumePanel (Volume Panel)
2
3The avVolumePanel module provides the capability of displaying the system volume panel for users to adjust the volume.
4
5An application cannot directly adjust the system volume. However, it can invoke the system volume panel for users to adjust the volume. When the user adjusts the volume, a volume prompt UI is displayed to explicitly notify the user that the system volume changes.
6
7
8> **NOTE**
9>
10> - The initial APIs of this module are supported since API version 12. Newly added APIs will be marked with a superscript to indicate their earliest API version.
11> - The sample effect is subject to the real device in use. Currently, DevEco Studio Previewer cannot display the actual volume or adjust the volume.
12> <!--RP1--><!--RP1End-->
13
14## Modules to Import
15
16```js
17import { AVVolumePanel } from '@kit.AudioKit';
18```
19## Attributes
20
21The [universal attributes](../apis-arkui/arkui-ts/ts-universal-attributes-size.md) are supported.
22
23## AVVolumePanel
24
25AVVolumePanel({volumeLevel?: number, volumeParameter?: AVVolumePanelParameter})
26
27Volume panel, which can be used to display the volume adjustment panel in your application.
28
29**Decorator**: [@Component](../../quick-start/arkts-create-custom-components.md)
30
31**System capability**: SystemCapability.Multimedia.Audio.Volume
32
33## Attributes
34
35In addition to the [universal attributes](../apis-arkui/arkui-ts/ts-universal-attributes-size.md), the following attributes are supported.
36
37**Parameters**
38
39| Name| Type| Mandatory| Decorator| Description                                                                                                                                                                                                   |
40| -------- | -------- | -------- | -------- |-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
41|volumeLevel | number | No| @Prop | Target volume. The value must be between the minimum volume and the maximum volume supported by the device. If the value is greater than the maximum volume supported, the maximum volume is used. If the value is less than the minimum volume supported, the minimum volume is used. For details about how to obtain the maximum and minimum volume values, see [AudioVolumeGroupManager](../apis-audio-kit/js-apis-audio.md#audiovolumegroupmanager9).|
42|volumeParameter | [AVVolumePanelParameter](#avvolumepanelparameter)  | No|  @Prop | Custom parameter of the volume panel. If this parameter is not passed in, the system volume bar is invoked.                                                                                                                                                                     |
43
44## AVVolumePanelParameter
45
46| Name| Type| Mandatory| Description
47| -------- | -------- | -------- | -------- |
48|position | [Position](../apis-arkui/arkui-ts/ts-types.md#position) | No| Position of the volume panel.|
49
50## Events
51
52The [universal events](../apis-arkui/arkui-ts/ts-universal-events-click.md) are supported.
53
54## Example
55
56Refer to the sample code below to develop a volume panel:
57
58```ts
59import { AVVolumePanel } from '@kit.AudioKit';
60
61@Entry
62@Component
63struct Index {
64
65  @State volume: number = 0;
66
67  build() {
68    Row() {
69      Column() {
70        AVVolumePanel({
71          volumeLevel: this.volume,
72          volumeParameter: {
73            position: {
74              x: 100,
75              y: 200
76            }
77          }
78        })
79      }
80    }.width('50%').height('50%')
81  }
82}
83```
84