volume number when slider pressed

Modules/AudioWidget.qml

@@ -91,8 +91,8 @@ Item {
                         id: sinkGrabber
                         visible: root.expanded
                         opacity: root.expanded ? 1 : 0
-                        width: 12
+                        width: sinkVolumeMouseArea.pressed ? 25 : 12
-                        height: 12
+                        height: sinkVolumeMouseArea.pressed ? 25 : 12
                         radius: width / 2
                         color: sinkVolumeMouseArea.containsMouse || sinkVolumeMouseArea.pressed ? "#ffffff" : "#aaaaaa"
                         border.color: "#40000000"
@@ -100,6 +100,26 @@ Item {
                         anchors.verticalCenter: parent.verticalCenter
                         x: sinkVolumeBar.width - width / 2
 
+                        Text {
+                            anchors.centerIn: parent
+                            anchors.verticalCenterOffset: text.length === 3 ? -0.5 : 0
+                            visible: sinkVolumeMouseArea.pressed
+                            font.pixelSize: text.length === 3 ? 10 : 12
+                            text: Math.round(( Pipewire.defaultAudioSink?.audio.volume ?? 0 ) * 100 ).toString()
+                        }
+
+                        Behavior on width {
+                            NumberAnimation {
+                                duration: 50
+                            }
+                        }
+
+                        Behavior on height {
+                            NumberAnimation {
+                                duration: 50
+                            }
+                        }
+
                         Behavior on opacity {
                             NumberAnimation {
                                 duration: 300
@@ -175,8 +195,8 @@ Item {
                         id: sourceGrabber
                         visible: root.expanded
                         opacity: root.expanded ? 1 : 0
-                        width: 12
+                        width: sourceVolumeMouseArea.pressed ? 25 : 12
-                        height: 12
+                        height: sourceVolumeMouseArea.pressed ? 25 : 12
                         radius: width / 2
                         color: sourceVolumeMouseArea.containsMouse || sourceVolumeMouseArea.pressed ? "#ffffff" : "#aaaaaa"
                         border.color: "#40000000"
@@ -184,6 +204,26 @@ Item {
                         anchors.verticalCenter: parent.verticalCenter
                         x: sourceVolumeBar.width - width / 2
 
+                        Text {
+                            anchors.centerIn: parent
+                            anchors.verticalCenterOffset: text.length === 3 ? -0.5 : 0
+                            visible: sourceVolumeMouseArea.pressed
+                            font.pixelSize: text.length === 3 ? 10 : 12
+                            text: Math.round(( Pipewire.defaultAudioSource?.audio.volume ?? 0 ) * 100 ).toString()
+                        }
+
+                        Behavior on width {
+                            NumberAnimation {
+                                duration: 50
+                            }
+                        }
+
+                        Behavior on height {
+                            NumberAnimation {
+                                duration: 50
+                            }
+                        }
+
                         Behavior on opacity {
                             NumberAnimation {
                                 duration: 300