styled slider

components/StyledSlider.qml

@@ -0,0 +1,31 @@
+import qs.config
+import QtQuick
+import QtQuick.Controls
+
+Slider {
+    id: control
+
+    background: Rectangle {
+        x: control.leftPadding
+        y: control.topPadding + control.availableHeight / 2 - height / 2
+        implicitWidth: 200
+        implicitHeight: 24
+        width: control.availableWidth
+        height: implicitHeight
+        radius: 8
+        color: Theme.palette.base100
+
+        Rectangle {
+          width: control.visualPosition * parent.width
+          Behavior on width {
+            NumberAnimation {
+              duration: 75
+            }
+          }
+            height: parent.height
+            color: Theme.palette.primary
+            radius: 8
+        }
+    }
+    handle: null
+}

modules/storybook/Storybook.qml

@@ -69,6 +69,19 @@ StyledWindow {
                 }
             }
 
+            ColumnLayout {
+                StyledText {
+                    text: "Slider"
+                    font.pixelSize: 18
+                }
+                StyledSlider {
+                    id: slider
+                    from: 0
+                    to: 100
+                    value: 50
+                }
+            }
+
             ColumnLayout {
                 StyledText {
                     text: "Drawer"