styled slider

components/StyledDrawer.qml

@@ -0,0 +1,26 @@
+import qs.config
+import QtQuick
+import QtQuick.Controls
+
+Drawer {
+    id: control
+    dim: false
+    background: Rectangle {
+        Component.onCompleted: {
+            if (control.edge == Qt.TopEdge) {
+                bottomLeftRadius = 8;
+                bottomRightRadius = 8;
+            } else if (control.edge == Qt.LeftEdge) {
+                topRightRadius = 8;
+                bottomRightRadius = 8;
+            } else if (control.edge == Qt.RightEdge) {
+                topLeftRadius = 8;
+                bottomLeftRadius = 8;
+            } else if (control.edge == Qt.BottomEdge) {
+                topLeftRadius = 8;
+                topRightRadius = 8;
+            }
+        }
+        color: Theme.palette.base200
+    }
+}

components/StyledSlider.qml

@@ -0,0 +1,26 @@
+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
+            height: parent.height
+            color: Theme.palette.primary
+            radius: 8
+        }
+    }
+    handle: null
+}

components/StyledSwitch.qml

@@ -0,0 +1,38 @@
+import qs.config
+import QtQuick
+import QtQuick.Controls
+
+Switch {
+    id: control
+    indicator: Item {
+        implicitWidth: 48
+        implicitHeight: 26
+        Rectangle {
+            implicitWidth: parent.width
+            implicitHeight: parent.height - 4
+            x: control.leftPadding
+            y: parent.height / 2 - height / 2
+            radius: 8
+            color: control.checked ? Theme.palette.primary : Theme.palette.base100
+            Behavior on color {
+                ColorAnimation {
+                    duration: 150
+                }
+            }
+        }
+
+        Rectangle {
+            x: control.checked ? parent.width - 3 * width / 4 : width / 4
+            y: parent.height / 2 - height / 2
+            Behavior on x {
+                NumberAnimation {
+                    duration: 150
+                }
+            }
+            width: 26
+            height: 26
+            radius: 8
+            color: Theme.palette.basecontent
+        }
+    }
+}

modules/storybook/Storybook.qml

@@ -26,6 +26,8 @@ StyledWindow {
         id: rect
 
         color: Theme.palette.base300
+        implicitWidth: 800
+        implicitHeight: 1200
         leftMargin: 48
         rightMargin: 48
         topMargin: 24
@@ -41,6 +43,22 @@ StyledWindow {
         }
 
         ColumnLayout {
+
+            spacing: 12
+
+            ColumnLayout {
+                StyledText {
+                    text: "Switch"
+                    font.pixelSize: 18
+                }
+                StyledSwitch {}
+            }
+
+            ColumnLayout {
+                StyledText {
+                    text: "ToolTip"
+                    font.pixelSize: 18
+                }
                 Button {
                     id: toolTipButton
                     text: "Hello world!"
@@ -50,5 +68,77 @@ StyledWindow {
                     }
                 }
             }
+
+            ColumnLayout {
+                StyledText {
+                    text: "Slider"
+                    font.pixelSize: 18
+                }
+                StyledSlider {
+                    id: slider
+                    from: 0
+                    to: 100
+                    value: 50
+                }
+            }
+
+            ColumnLayout {
+                StyledText {
+                    text: "Drawer"
+                    font.pixelSize: 18
+                }
+                RowLayout {
+                    Button {
+                        text: "Top"
+                        onClicked: {
+                            drawer.x = root.width / 2 - drawer.width / 2;
+                            drawer.y = 0;
+                            drawer.edge = Qt.TopEdge;
+                            drawer.open();
+                        }
+                    }
+                    Button {
+                        text: "Left"
+                        onClicked: {
+                            drawer.y = root.height / 2 - drawer.height / 2;
+                            drawer.x = 0;
+                            drawer.edge = Qt.LeftEdge;
+                            drawer.open();
+                        }
+                    }
+                    Button {
+                        text: "Right"
+                        onClicked: {
+                            drawer.y = root.height / 2 - drawer.height / 2;
+                            drawer.x = 0;
+                            drawer.edge = Qt.RightEdge;
+                            drawer.open();
+                        }
+                    }
+                    Button {
+                        text: "Bottom"
+                        onClicked: {
+                            drawer.x = root.width / 2 - drawer.width / 2;
+                            drawer.y = 0;
+                            drawer.edge = Qt.BottomEdge;
+                            drawer.open();
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    StyledDrawer {
+        id: drawer
+        edge: Qt.TopEdge
+        width: 400
+        height: 200
+        Button {
+            anchors.horizontalCenter: parent.horizontalCenter
+            anchors.verticalCenter: parent.verticalCenter
+            text: "Close"
+            onClicked: drawer.close()
+        }
     }
 }