From 9da310ade49de9a757e9cf095b533a7005dfee12 Mon Sep 17 00:00:00 2001
From: Corey Woodworth <coreywoodworth@gmail.com>
Date: Fri, 26 Sep 2025 11:01:38 -0400
Subject: [PATCH 1/3] Rounds the ends of NSliders to be more consistent with
 the rest of Noctalia's look

---
 Widgets/NSlider.qml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Widgets/NSlider.qml b/Widgets/NSlider.qml
index 51b2f62f..323c9f43 100644
--- a/Widgets/NSlider.qml
+++ b/Widgets/NSlider.qml
@@ -25,7 +25,7 @@ Slider {
     implicitHeight: trackHeight
     width: root.availableWidth
     height: implicitHeight
-    radius: 0
+    radius: height / 2
     color: Qt.alpha(Color.mSurface, 0.5)
     border.color: Qt.alpha(Color.mOutline, 0.5)
     border.width: Math.max(1, Style.borderS * scaling)

From d1a89387f9564c089517fd1d697a359707cbe16b Mon Sep 17 00:00:00 2001
From: Corey Woodworth <coreywoodworth@gmail.com>
Date: Fri, 26 Sep 2025 13:24:19 -0400
Subject: [PATCH 2/3] Fix: Make sure left side doesn't get squished

---
 Widgets/NSlider.qml | 85 ++++++++++++++++++++++++++-------------------
 1 file changed, 50 insertions(+), 35 deletions(-)

diff --git a/Widgets/NSlider.qml b/Widgets/NSlider.qml
index 323c9f43..a2721beb 100644
--- a/Widgets/NSlider.qml
+++ b/Widgets/NSlider.qml
@@ -30,52 +30,67 @@ Slider {
     border.color: Qt.alpha(Color.mOutline, 0.5)
     border.width: Math.max(1, Style.borderS * scaling)
 
-    // Animated gradient active track
-    Rectangle {
-      id: activeTrack
+    // A container composite shape that puts a semicircle on the end
+    Item {
+      id: activeTrackContainer
       width: root.visualPosition * parent.width
       height: parent.height
-      radius: parent.radius
+      clip: true
 
-      // Animated gradient fill
-      gradient: Gradient {
-        orientation: Gradient.Horizontal
-        GradientStop {
-          position: 0.0
-          color: Qt.darker(Color.mPrimary, 1.2)
-          Behavior on color {
-            ColorAnimation {
-              duration: 300
+      // The rounded end cap made from a rounded rectangle
+      Rectangle {
+        width: parent.height
+        height: parent.height
+        radius: width / 2
+        color: Qt.darker(Color.mPrimary, 1.2) //starting color of gradient
+      }
+
+      // The main rectangle
+      Rectangle {
+        x: parent.height / 2
+        width: parent.width - x // Fills the rest of the container
+        height: parent.height
+        radius: 0
+        // Animated gradient fill
+        gradient: Gradient {
+          orientation: Gradient.Horizontal
+          GradientStop {
+            position: 0.0
+            color: Qt.darker(Color.mPrimary, 1.2)
+            Behavior on color {
+              ColorAnimation {
+                duration: 300
+              }
             }
           }
-        }
-        GradientStop {
-          position: 0.5
-          color: Color.mPrimary
-          SequentialAnimation on position {
-            loops: Animation.Infinite
-            NumberAnimation {
-              from: 0.3
-              to: 0.7
-              duration: 2000
-              easing.type: Easing.InOutSine
-            }
-            NumberAnimation {
-              from: 0.7
-              to: 0.3
-              duration: 2000
-              easing.type: Easing.InOutSine
+          GradientStop {
+            position: 0.5
+            color: Color.mPrimary
+            SequentialAnimation on position {
+              loops: Animation.Infinite
+              NumberAnimation {
+                from: 0.3
+                to: 0.7
+                duration: 2000
+                easing.type: Easing.InOutSine
+              }
+              NumberAnimation {
+                from: 0.7
+                to: 0.3
+                duration: 2000
+                easing.type: Easing.InOutSine
+              }
             }
           }
-        }
-        GradientStop {
-          position: 1.0
-          color: Qt.lighter(Color.mPrimary, 1.2)
+          GradientStop {
+            position: 1.0
+            color: Qt.lighter(Color.mPrimary, 1.2)
+          }
         }
       }
     }
 
-    // Circular cutout
+  // Circular cutout
     Rectangle {
       id: knobCutout
       width: knobDiameter + cutoutExtra

From 74a0c9dbf471fb5029ff7644a0b9eebcc2cd55fc Mon Sep 17 00:00:00 2001
From: Corey Woodworth <coreywoodworth@gmail.com>
Date: Fri, 26 Sep 2025 14:22:22 -0400
Subject: [PATCH 3/3] Fix: Knob was getting clipped.

---
 Widgets/NSlider.qml | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/Widgets/NSlider.qml b/Widgets/NSlider.qml
index a2721beb..29ea2dbb 100644
--- a/Widgets/NSlider.qml
+++ b/Widgets/NSlider.qml
@@ -15,6 +15,8 @@ Slider {
   readonly property real trackHeight: knobDiameter * 0.4
   readonly property real cutoutExtra: Math.round(Style.baseWidgetSize * 0.1 * scaling)
 
+  padding: cutoutExtra / 2
+
   snapMode: snapAlways ? Slider.SnapAlways : Slider.SnapOnRelease
   implicitHeight: Math.max(trackHeight, knobDiameter)
 
@@ -90,14 +92,14 @@ Slider {
       }
     }
 
-  // Circular cutout
+    // Circular cutout
     Rectangle {
       id: knobCutout
       width: knobDiameter + cutoutExtra
       height: knobDiameter + cutoutExtra
       radius: width / 2
       color: root.cutoutColor !== undefined ? root.cutoutColor : Color.mSurface
-      x: root.leftPadding + root.visualPosition * (root.availableWidth - root.knobDiameter) - cutoutExtra / 2
+      x: root.leftPadding + Math.round(root.visualPosition * (root.availableWidth - root.knobDiameter) - cutoutExtra)
       anchors.verticalCenter: parent.verticalCenter
     }
   }