add styled slider finally

widgets/BarComponent.qml

@@ -4,7 +4,7 @@ import qs
 import qs.settings
 
 Rectangle {
-    property color base: Qt.rgba(Colors.accent.r, Colors.accent.g, Colors.accent.b, active ? 0.5 : 0.15)
+    property color base: Qt.rgba(Colors.accent.r, Colors.accent.g, Colors.accent.b, active ? 0.3 : 0.17)
     property bool active: false
     color: base
     implicitHeight: Config.cfg.bar.height - 8

widgets/StyledSlider.qml

@@ -0,0 +1,36 @@
+import QtQuick
+import QtQuick.Controls.Basic
+import qs.settings
+import qs
+
+Slider {
+    id: control
+    value: 0.5
+
+    background: Rectangle {
+        x: control.leftPadding
+        y: control.topPadding + control.availableHeight / 2 - height / 2
+        implicitWidth: 200
+        implicitHeight: 2
+        width: control.availableWidth
+        height: implicitHeight
+        radius: 2
+        color: Colors.c.base01
+
+        Rectangle {
+            width: control.visualPosition * parent.width
+            height: parent.height
+            color: Colors.c.base03
+            radius: Config.cfg.appearance.rounding
+        }
+    }
+
+    handle: Rectangle {
+        x: control.leftPadding + control.visualPosition * (control.availableWidth - width)
+        y: control.topPadding + control.availableHeight / 2 - height / 2
+        implicitWidth: Config.cfg.appearance.iconSize
+        implicitHeight: Config.cfg.appearance.iconSize
+        radius: Config.cfg.appearance.rounding
+        color: control.pressed ? Colors.c.base0D : Colors.c.base04
+    }
+}