Some layout fixes to toggle and slider

NSlider(withLabel): fix some small layout issues
NToggle: fix vertical centering of the thumb

Widgets/NSlider.qml

@@ -44,29 +44,18 @@ Slider {
       height: knobDiameter + cutoutExtra
       radius: width / 2
       color: root.cutoutColor !== undefined ? root.cutoutColor : Color.mSurface
-      x: Math.max(0, Math.min(parent.width - width, root.visualPosition * (parent.width - root.knobDiameter) - cutoutExtra / 2))
+      x: Math.max(0, Math.min(parent.width - width, Math.round(root.visualPosition * (parent.width - root.knobDiameter) - cutoutExtra / 2)))
       y: (parent.height - height) / 2
+      anchors.verticalCenter: parent.verticalCenter
     }
   }
 
   handle: Item {
     width: knob.implicitWidth
     height: knob.implicitHeight
-    x: root.leftPadding + root.visualPosition * (root.availableWidth - width)
+    x: root.leftPadding + Math.round(root.visualPosition * (root.availableWidth - width))
     y: root.topPadding + root.availableHeight / 2 - height / 2
 
-    // Subtle shadow for a more polished look
-    MultiEffect {
-      anchors.fill: knob
-      source: knob
-      shadowEnabled: true
-      shadowColor: Color.mShadow
-      shadowOpacity: 0.25
-      shadowHorizontalOffset: 0
-      shadowVerticalOffset: 1
-      shadowBlur: 8
-    }
-
     Rectangle {
       id: knob
       implicitWidth: knobDiameter
@@ -75,6 +64,7 @@ Slider {
       color: root.pressed ? Color.mTertiary : Color.mSurface
       border.color: Color.mPrimary
       border.width: Math.max(1, Style.borderL * scaling)
+      anchors.centerIn: parent
 
       Behavior on color {
         ColorAnimation {

Widgets/NSliderWithLabel.qml

@@ -0,0 +1,61 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import qs.Commons
+import qs.Services
+import qs.Widgets
+
+RowLayout {
+  id: root
+
+  // Properties that mirror NSlider
+  property real from: 0
+  property real to: 1
+  property real value: 0
+  property real stepSize: 0.01
+  property var cutoutColor
+  property bool snapAlways: true
+  property real heightRatio: 0.75
+  property bool showPercentage: true
+  property string suffix: "%"
+  property int decimalPlaces: 0 // 0 for integers, 1 for one decimal place, etc.
+
+  // Signals
+  signal moved(real value)
+  signal pressedChanged(bool pressed)
+
+  spacing: Style.marginS * scaling
+
+  NSlider {
+    id: slider
+    Layout.fillWidth: true
+    from: root.from
+    to: root.to
+    value: root.value
+    stepSize: root.stepSize
+    cutoutColor: root.cutoutColor
+    snapAlways: root.snapAlways
+    heightRatio: root.heightRatio
+    stableWidth: true
+    minWidth: 200 * scaling
+
+    onMoved: root.moved(value)
+    onPressedChanged: root.pressedChanged(pressed)
+  }
+
+  NText {
+    id: percentageLabel
+    visible: root.showPercentage
+    text: {
+      if (root.decimalPlaces === 0) {
+        return Math.round(slider.value * 100) + root.suffix
+      } else {
+        return (slider.value * 100).toFixed(root.decimalPlaces) + root.suffix
+      }
+    }
+    Layout.alignment: Qt.AlignVCenter
+    Layout.leftMargin: Style.marginS * scaling
+    Layout.preferredWidth: 50 * scaling
+    horizontalAlignment: Text.AlignRight
+  }
+}

Widgets/NToggle.qml

@@ -54,6 +54,7 @@ RowLayout {
       border.color: root.checked ? Color.mSurface : Color.mSurface
       border.width: Math.max(1, Style.borderM * scaling)
       anchors.verticalCenter: parent.verticalCenter
+      anchors.verticalCenterOffset: 0
       x: root.checked ? switcher.width - width - 3 * scaling : 3 * scaling
 
       Behavior on x {