Merge pull request 'Slider widget' (#5) from 03-slider into master

Slider.qml

@@ -0,0 +1,43 @@
+import QtQuick 2.12
+import QtQuick.Controls 2.12
+import QtQuick.Controls.impl 2.12
+import QtGraphicalEffects 1.12
+import "theme"
+
+Slider {
+    id: control
+
+    property color buttonColor: Theme.sliderButtonColor
+    property color buttonActiveColor: Theme.defaultButtonActiveColor
+    property color barRightColor: Theme.sliderBarRightColor
+    property color barLeftColor: Theme.sliderBarLeftColor
+
+    background: Rectangle {
+            x: control.leftPadding
+            y: control.topPadding + control.availableHeight / 2 - height / 2
+            implicitWidth: 200
+            implicitHeight: 4
+            width: control.availableWidth
+            height: implicitHeight
+            radius: 2
+            color: control.barRightColor
+
+            Rectangle {
+                width: control.visualPosition * parent.width
+                height: parent.height
+                color: control.barLeftColor
+                radius: 2
+            }
+        }
+
+    handle: Rectangle {
+        x: control.leftPadding + control.visualPosition * (control.availableWidth - width)
+        y: control.topPadding + control.availableHeight / 2 - height / 2
+        implicitWidth: 26 * gcd.themeScale
+        implicitHeight: 26 * gcd.themeScale
+        radius: 13 * gcd.themeScale
+        color: control.pressed ? control.buttonActiveColor : control.buttonColor
+        border.color: control.buttonColor
+    }
+
+}

theme/CwtchDark.qml

@@ -39,6 +39,9 @@ ThemeType {
     toggleColor: darkGrayPurple
     toggleOnColor: whitePurple
     toggleOffColor: mauvePurple
+    sliderButtonColor: whitePurple
+    sliderBarLeftColor: mauvePurple
+    sliderBarRightColor: mauvePurple
 
     toolbarIconColor: whitePurple
 

theme/CwtchLight.qml

@@ -40,6 +40,9 @@ ThemeType {
     toggleColor: whitePurple
     toggleOnColor: hotPink
     toggleOffColor: purple
+    sliderButtonColor: pink
+    sliderBarLeftColor: purple
+    sliderBarRightColor: purple
 
     toolbarIconColor: darkPurple
 

theme/Theme.qml

@@ -34,6 +34,9 @@ Item {
     readonly property color toggleColor: theme.toggleColor
     readonly property color toggleOffColor: theme.toggleOffColor
     readonly property color toggleOnColor: theme.toggleOnColor
+    readonly property color sliderButtonColor: theme.sliderButtonColor
+    readonly property color sliderBarLeftColor: theme.sliderBarLeftColor
+    readonly property color sliderBarRightColor: theme.sliderBarRightColor
 
     readonly property color toolbarIconColor: theme.toolbarIconColor
 

theme/ThemeType.qml

@@ -30,6 +30,9 @@ QtObject {
     property color toggleColor: "black"
     property color toggleOnColor: "black"
     property color toggleOffColor: "black"
+    property color sliderButtonColor: "red"
+    property color sliderBarLeftColor: "red"
+    property color sliderBarRightColor: "red"
 
     property color toolbarIconColor: "red"