Use accent color in Sampler's slicers

Author: juzzlin

src/view/qml/Dialogs/SamplerDialog.qml

@@ -235,32 +235,53 @@ Dialog {
                 Layout.alignment: Qt.AlignTop
                 spacing: 15
 
+                component ThemedSlider : Slider {
+                    id: control
+                    Layout.fillWidth: true
+                    handle: Rectangle {
+                        x: control.leftPadding + control.visualPosition * (control.availableWidth - width)
+                        y: control.topPadding + control.availableHeight / 2 - height / 2
+                        implicitWidth: 16
+                        implicitHeight: 16
+                        radius: 8
+                        color: control.pressed ? "#f0f0f0" : "#f6f6f6"
+                        border.color: themeService.accentColor
+                    }
+                    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: "#444"
+
+                        Rectangle {
+                            width: control.visualPosition * parent.width
+                            height: parent.height
+                            color: themeService.accentColor
+                            radius: 2
+                        }
+                    }
+                }
+
                 // Pan Slider
                 ColumnLayout {
                     Layout.fillWidth: true
                     Label {
                         text: qsTr("Pan: ") + (panSlider.value > 0 ? "+" : "") + Math.round(panSlider.value) + "%"
                         color: "white"
                     }
-                    Slider {
+                    ThemedSlider {
                         id: panSlider
-                        Layout.fillWidth: true
                         from: -100
                         to: 100
                         stepSize: 1
                         value: (samplerController.selectedPadPan * 200) - 100
                         onMoved: {
                             samplerController.selectedPadPan = (value + 100) / 200
                         }
-                        handle: Rectangle {
-                            x: panSlider.leftPadding + panSlider.visualPosition * (panSlider.availableWidth - width)
-                            y: panSlider.topPadding + panSlider.availableHeight / 2 - height / 2
-                            implicitWidth: 16
-                            implicitHeight: 16
-                            radius: 8
-                            color: panSlider.pressed ? "#f0f0f0" : "#f6f6f6"
-                            border.color: "#bdbebf"
-                        }
                     }
                 }
 
@@ -271,25 +292,15 @@ Dialog {
                         text: qsTr("Volume: ") + Math.round(volumeSlider.value) + "%"
                         color: "white"
                     }
-                    Slider {
+                    ThemedSlider {
                         id: volumeSlider
-                        Layout.fillWidth: true
                         from: 0
                         to: 100
                         stepSize: 1
                         value: samplerController.selectedPadVolume * 100
                         onMoved: {
                             samplerController.selectedPadVolume = value / 100
                         }
-                        handle: Rectangle {
-                            x: volumeSlider.leftPadding + volumeSlider.visualPosition * (volumeSlider.availableWidth - width)
-                            y: volumeSlider.topPadding + volumeSlider.availableHeight / 2 - height / 2
-                            implicitWidth: 16
-                            implicitHeight: 16
-                            radius: 8
-                            color: volumeSlider.pressed ? "#f0f0f0" : "#f6f6f6"
-                            border.color: "#bdbebf"
-                        }
                     }
                 }
 
@@ -300,25 +311,15 @@ Dialog {
                         text: qsTr("LPF Cutoff: ") + Math.round(cutoffSlider.value) + "%"
                         color: "white"
                     }
-                    Slider {
+                    ThemedSlider {
                         id: cutoffSlider
-                        Layout.fillWidth: true
                         from: 0
                         to: 100
                         stepSize: 1
                         value: samplerController.selectedPadCutoff * 100
                         onMoved: {
                             samplerController.selectedPadCutoff = value / 100
                         }
-                        handle: Rectangle {
-                            x: cutoffSlider.leftPadding + cutoffSlider.visualPosition * (cutoffSlider.availableWidth - width)
-                            y: cutoffSlider.topPadding + cutoffSlider.availableHeight / 2 - height / 2
-                            implicitWidth: 16
-                            implicitHeight: 16
-                            radius: 8
-                            color: cutoffSlider.pressed ? "#f0f0f0" : "#f6f6f6"
-                            border.color: "#bdbebf"
-                        }
                     }
                 }
 
@@ -329,25 +330,15 @@ Dialog {
                         text: qsTr("HPF Cutoff: ") + Math.round(hpfCutoffSlider.value) + "%"
                         color: "white"
                     }
-                    Slider {
+                    ThemedSlider {
                         id: hpfCutoffSlider
-                        Layout.fillWidth: true
                         from: 0
                         to: 100
                         stepSize: 1
                         value: samplerController.selectedPadHpfCutoff * 100
                         onMoved: {
                             samplerController.selectedPadHpfCutoff = value / 100
                         }
-                        handle: Rectangle {
-                            x: hpfCutoffSlider.leftPadding + hpfCutoffSlider.visualPosition * (hpfCutoffSlider.availableWidth - width)
-                            y: hpfCutoffSlider.topPadding + hpfCutoffSlider.availableHeight / 2 - height / 2
-                            implicitWidth: 16
-                            implicitHeight: 16
-                            radius: 8
-                            color: hpfCutoffSlider.pressed ? "#f0f0f0" : "#f6f6f6"
-                            border.color: "#bdbebf"
-                        }
                     }
                 }