Merge pull request #370 from MrDowntempo/Just-The-Tip

Rounds the ends of NSliders to be more consistent with the look

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)
 
@@ -25,52 +27,67 @@ 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)
 
-    // 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)
+          }
         }
       }
     }
@@ -82,7 +99,7 @@ Slider {
       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
     }
   }