better structure

config/quickshell/Modules/Panel/Misc/MonitorSlider.qml

@@ -0,0 +1,54 @@
+import QtQuick
+import QtQuick.Layouts
+import Quickshell
+import qs.Constants
+import qs.Noctalia
+
+Item {
+    id: root
+
+    property string icon: "volume-high"
+    property real value: 50
+    property real from: 0
+    property real to: 100
+    property color colorFill: Colors.primary
+    property color colorRest: Colors.surface0
+
+    implicitHeight: layout.implicitHeight
+
+    RowLayout {
+        id: layout
+
+        anchors.fill: parent
+        spacing: Style.marginS
+
+        NIcon {
+            id: iconItem
+
+            icon: root.icon
+            color: root.colorFill
+        }
+
+        Rectangle {
+            id: whole
+
+            Layout.fillWidth: true
+            color: root.colorRest
+            radius: height / 2
+            height: Style.baseWidgetSize * 0.3
+
+            Rectangle {
+                id: fill
+
+                width: Math.max(0, Math.min(whole.width, (root.value - root.from) / (root.to - root.from) * whole.width))
+                height: parent.height
+                color: root.colorFill
+                radius: height / 2
+                anchors.left: parent.left
+            }
+
+        }
+
+    }
+
+}