From 0245da01a290e16c77cc632e09aa03be3ed8969d Mon Sep 17 00:00:00 2001
From: Dan Ballard <dan@mindstab.net>
Date: Thu, 4 Jun 2020 15:44:02 -0700
Subject: [PATCH] slider widget

---
 Slider.qml           | 43 +++++++++++++++++++++++++++++++++++++++++++
 theme/CwtchDark.qml  |  3 +++
 theme/CwtchLight.qml |  3 +++
 theme/Theme.qml      |  3 +++
 theme/ThemeType.qml  |  3 +++
 5 files changed, 55 insertions(+)
 create mode 100644 Slider.qml

diff --git a/Slider.qml b/Slider.qml
new file mode 100644
index 0000000..460c4f1
--- /dev/null
+++ b/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
+    }
+
+}
\ No newline at end of file
diff --git a/theme/CwtchDark.qml b/theme/CwtchDark.qml
index ab7cf51..f80f291 100644
--- a/theme/CwtchDark.qml
+++ b/theme/CwtchDark.qml
@@ -39,6 +39,9 @@ ThemeType {
     toggleColor: darkGrayPurple
     toggleOnColor: whitePurple
     toggleOffColor: mauvePurple
+    sliderButtonColor: whitePurple
+    sliderBarLeftColor: mauvePurple
+    sliderBarRightColor: mauvePurple
 
     toolbarIconColor: whitePurple
 
diff --git a/theme/CwtchLight.qml b/theme/CwtchLight.qml
index 26ba011..01dbfc5 100644
--- a/theme/CwtchLight.qml
+++ b/theme/CwtchLight.qml
@@ -40,6 +40,9 @@ ThemeType {
     toggleColor: whitePurple
     toggleOnColor: hotPink
     toggleOffColor: purple
+    sliderButtonColor: pink
+    sliderBarLeftColor: purple
+    sliderBarRightColor: purple
 
     toolbarIconColor: darkPurple
 
diff --git a/theme/Theme.qml b/theme/Theme.qml
index 1e4d372..466f0a5 100644
--- a/theme/Theme.qml
+++ b/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
 
diff --git a/theme/ThemeType.qml b/theme/ThemeType.qml
index 6ec5059..a65c194 100644
--- a/theme/ThemeType.qml
+++ b/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"