diff --git a/components/StyledSlider.qml b/components/StyledSlider.qml
new file mode 100644
index 0000000..644d024
--- /dev/null
+++ b/components/StyledSlider.qml
@@ -0,0 +1,33 @@
+import qs.config
+import QtQuick
+import QtQuick.Controls
+
+Slider {
+    id: control
+
+    height: 24
+
+    background: Rectangle {
+        x: control.leftPadding
+        y: control.topPadding + control.availableHeight / 2 - height / 2
+        implicitWidth: 200
+        implicitHeight: control.height
+        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
+}
diff --git a/modules/storybook/Storybook.qml b/modules/storybook/Storybook.qml
index 08f9538..f2565dc 100644
--- a/modules/storybook/Storybook.qml
+++ b/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"