Reverted the labeled NSlider, which tends to trigger hard crashes when opening the settings

Modules/Demo/DemoPanel.qml

@@ -43,7 +43,7 @@ NLoader {
           NText {
             text: "DemoPanel"
             color: Colors.accentPrimary
-            font.pointSize: Style.fontSizeXL* scaling
+            font.pointSize: Style.fontSizeXL * scaling
             font.weight: Style.fontWeightBold
             Layout.alignment: Qt.AlignHCenter
           }
@@ -60,22 +60,27 @@ NLoader {
                 color: Colors.accentSecondary
                 font.weight: Style.fontWeightBold
               }
+              NText {
+                text: `${Math.round(Scaling.overrideScale * 100)}%`
+                Layout.alignment: Qt.AlignVCenter
+              }
               RowLayout {
                 spacing: Style.marginSmall * scaling
                 NSlider {
-                  label: "Scaling"
+                id: scaleSlider
-                  description: "Scaling goes brrrr"
+                from: 0.6
-                  valueSuffix: "%"
+                to: 1.8
-                  from: 60
+                stepSize: 0.01
-                  to: 180
+                value: Scaling.overrideScale
-                  stepSize: 1
+                implicitWidth: bgRect.width * 0.75
-                  value: Scaling.overrideScale * 100
+                onMoved: {
-                  implicitWidth: bgRect.width * 0.75
+                  
-                  onPressedChanged: function (pressed, value) {
-                    Scaling.overrideEnabled = true
-                    Scaling.overrideScale = value / 100
-                  }
                 }
+                onPressedChanged: {
+                  Scaling.overrideScale = value
+                  Scaling.overrideEnabled = true
+                }
+              }
                 NIconButton {
                   icon: "refresh"
                   fontPointSize: Style.fontSizeLarge * scaling

Modules/Settings/SettingsPanel.qml

@@ -10,13 +10,15 @@ import qs.Widgets
 NLoader {
   id: root
 
+        readonly property real scaling: Scaling.scale(screen)
+
   content: Component {
     NPanel {
       id: panel
 
       WlrLayershell.keyboardFocus: WlrKeyboardFocus.OnDemand
 
-      readonly property real scaling: Scaling.scale(screen)
+
       property int currentTabIndex: 0
       property var tabsModel: [{
           "label": "General",
@@ -74,8 +76,8 @@ NLoader {
         border.color: Colors.backgroundTertiary
         border.width: Math.max(1, Style.borderMedium * scaling)
         layer.enabled: true
-        width: (screen.width / 2) * scaling
+        width: (screen.width * 0.5) * scaling
-        height: (screen.height / 2) * scaling
+        height: (screen.height * 0.5) * scaling
         anchors.centerIn: parent
 
         MouseArea {

Modules/Settings/Tabs/Wallpaper.qml

@@ -116,20 +116,20 @@ ColumnLayout {
         }
 
         // Wallpaper Interval
-        NSlider {
+        // NSlider {
-          label: "Wallpaper Interval"
+        //   label: "Wallpaper Interval"
-          description: "How often to change wallpapers automatically (in seconds)"
+        //   description: "How often to change wallpapers automatically (in seconds)"
-          valueSuffix: "s"
+        //   valueSuffix: "s"
-          from: 10
+        //   from: 10
-          to: 900
+        //   to: 900
-          stepSize: 10
+        //   stepSize: 10
-          value: Settings.data.wallpaper.randomInterval
+        //   value: Settings.data.wallpaper.randomInterval
-          onPressedChanged: function (pressed, value) {
+        //   onPressedChanged: function (pressed, value) {
-            Settings.data.wallpaper.randomInterval = Math.round(value)
+        //     Settings.data.wallpaper.randomInterval = Math.round(value)
-          }
+        //   }
-          cutoutColor: Colors.backgroundPrimary
+        //   cutoutColor: Colors.backgroundPrimary
-          Layout.fillWidth: true
+        //   Layout.fillWidth: true
-        }
+        // }
       }
 
       NDivider {
@@ -229,36 +229,36 @@ ColumnLayout {
           }
 
           // Transition FPS
-          NSlider {
+          // NSlider {
-            label: "Transition FPS"
+          //   label: "Transition FPS"
-            description: "Frames per second for transition animations"
+          //   description: "Frames per second for transition animations"
-            valueSuffix: " FPS"
+          //   valueSuffix: " FPS"
-            from: 30
+          //   from: 30
-            to: 500
+          //   to: 500
-            stepSize: 5
+          //   stepSize: 5
-            value: Settings.data.wallpaper.swww.transitionFps
+          //   value: Settings.data.wallpaper.swww.transitionFps
-            onPressedChanged: function (pressed, value) {
+          //   onPressedChanged: function (pressed, value) {
-              Settings.data.wallpaper.swww.transitionFps = Math.round(value)
+          //     Settings.data.wallpaper.swww.transitionFps = Math.round(value)
-            }
+          //   }
-            cutoutColor: Colors.backgroundPrimary
+          //   cutoutColor: Colors.backgroundPrimary
-            Layout.fillWidth: true
+          //   Layout.fillWidth: true
-          }
+          // }
 
           // Transition Duration
-          NSlider {
+          // NSlider {
-            label: "Transition Duration"
+          //   label: "Transition Duration"
-            description: "Duration of transition animations in seconds"
+          //   description: "Duration of transition animations in seconds"
-            valueSuffix: "s"
+          //   valueSuffix: "s"
-            from: 0.25
+          //   from: 0.25
-            to: 10
+          //   to: 10
-            stepSize: 0.05
+          //   stepSize: 0.05
-            value: Settings.data.wallpaper.swww.transitionDuration
+          //   value: Settings.data.wallpaper.swww.transitionDuration
-            onPressedChanged: function (pressed, value) {
+          //   onPressedChanged: function (pressed, value) {
-              Settings.data.wallpaper.swww.transitionDuration = value
+          //     Settings.data.wallpaper.swww.transitionDuration = value
-            }
+          //   }
-            cutoutColor: Colors.backgroundPrimary
+          //   cutoutColor: Colors.backgroundPrimary
-            Layout.fillWidth: true
+          //   Layout.fillWidth: true
-          }
+          // }
         }
       }
     }

Widgets/NSlider.qml

@@ -1,10 +1,9 @@
 import QtQuick
 import QtQuick.Controls
 import QtQuick.Effects
-import QtQuick.Layouts
 import qs.Services
 
-ColumnLayout {
+Slider {
   id: root
 
   readonly property real scaling: Scaling.scale(screen)
@@ -12,155 +11,80 @@ ColumnLayout {
   readonly property real trackHeight: knobDiameter * 0.5
   readonly property real cutoutExtra: Style.baseWidgetSize * 0.1 * scaling
 
-  property string label: ""
-  property string description: ""
-  property string valueSuffix: ""
-  property real from: 0.0
-  property real to: 1.0
-  property real stepSize: 0.01
-  property real value: 0.0
-
   // Optional color to cut the track beneath the knob (should match surrounding background)
   property var cutoutColor
   property var screen
   property bool snapAlways: true
 
-  signal pressedChanged(bool pressed, real value)
+  snapMode: snapAlways ? Slider.SnapAlways : Slider.SnapOnRelease
-  signal moved(real value)
+  implicitHeight: Math.max(trackHeight, knobDiameter)
 
-  Layout.fillWidth: true
+  background: Rectangle {
-  spacing: Style.marginSmall * scaling
+    x: root.leftPadding
+    y: root.topPadding + root.availableHeight / 2 - height / 2
+    implicitWidth: Style.sliderWidth
+    implicitHeight: trackHeight
+    width: root.availableWidth
+    height: implicitHeight
+    radius: height / 2
+    color: Colors.surfaceVariant
 
-  RowLayout {
+    Rectangle {
-    Layout.fillWidth: true
+      id: activeTrack
-
+      width: root.visualPosition * parent.width
-    ColumnLayout {
+      height: parent.height
-      spacing: Style.marginTiniest * scaling
+      color: Colors.accentPrimary
-
+      radius: parent.radius
-      NText {
-        text: label
-        font.pointSize: Style.fontSizeMedium * scaling
-        font.weight: Style.fontWeightBold
-        color: Colors.textPrimary
-        Layout.fillWidth: true
-      }
-
-      NText {
-        text: description
-        font.pointSize: Style.fontSizeSmall * scaling
-        color: Colors.textSecondary
-        wrapMode: Text.WordWrap
-      }
     }
 
-    NText {
+    // Circular cutout
-      text: {
+    Rectangle {
-        var v
+      id: knobCutout
-        if (Number.isInteger(value)) {
+      width: knobDiameter + cutoutExtra
-          v = value
+      height: knobDiameter + cutoutExtra
-        } else {
+      radius: width / 2
-          v = value.toFixed(2)
+      color: root.cutoutColor !== undefined ? root.cutoutColor : Colors.backgroundPrimary
-        }
+      x: Math.max(0, Math.min(parent.width - width,
-
+                              root.visualPosition * (parent.width - root.knobDiameter) - cutoutExtra / 2))
-        if (valueSuffix != "") {
+      y: (parent.height - height) / 2
-          return v + valueSuffix
-        } else {
-          return v
-        }
-      }
-      font.pointSize: Style.fontSizeMedium * scaling
-      font.weight: Style.fontWeightBold
-      color: Colors.textPrimary
-      Layout.alignment: Qt.AlignBottom | Qt.AlignRight
     }
   }
 
-  Slider {
+  handle: Item {
-    id: slider
+    width: knob.implicitWidth
+    height: knob.implicitHeight
+    x: root.leftPadding + root.visualPosition * (root.availableWidth - width)
+    y: root.topPadding + root.availableHeight / 2 - height / 2
 
-    Layout.fillWidth: true
+    // Subtle shadow for a more polished look (keeps theme colors)
-    from: root.from
+    MultiEffect {
-    to: root.to
+      anchors.fill: knob
-    stepSize: root.stepSize
+      source: knob
-    value: root.value
+      shadowEnabled: true
-    snapMode: snapAlways ? Slider.SnapAlways : Slider.SnapOnRelease
+      shadowColor: Colors.shadow
-    implicitWidth: root.width
+      shadowOpacity: 0.25
-    implicitHeight: Math.max(trackHeight, knobDiameter)
+      shadowHorizontalOffset: 0
-    onPressedChanged: {
+      shadowVerticalOffset: 1
-      root.pressedChanged(slider.pressed, slider.value)
+      shadowBlur: 8
-    }
-    onMoved: {
-      root.value = slider.value
-      root.moved(value)
     }
 
-    background: Rectangle {
+    Rectangle {
-      x: slider.leftPadding
+      id: knob
-      y: slider.topPadding + slider.availableHeight / 2 - height / 2
+      implicitWidth: knobDiameter
-      implicitWidth: Style.sliderWidth
+      implicitHeight: knobDiameter
-      implicitHeight: trackHeight
+      radius: width * 0.5
-      width: slider.availableWidth
+      color: root.pressed ? Colors.surfaceVariant : Colors.surface
-      height: implicitHeight
+      border.color: Colors.accentPrimary
-      radius: height / 2
+      border.width: Math.max(1, Style.borderThick * scaling)
-      color: Colors.surfaceVariant
 
+      // Press feedback halo (using accent color, low opacity)
       Rectangle {
-        id: activeTrack
+        anchors.centerIn: parent
-        width: slider.visualPosition * parent.width
+        width: parent.width + 8 * scaling
-        height: parent.height
+        height: parent.height + 8 * scaling
-        color: Colors.accentPrimary
-        radius: parent.radius
-      }
-
-      // Circular cutout
-      Rectangle {
-        id: knobCutout
-        width: knobDiameter + cutoutExtra
-        height: knobDiameter + cutoutExtra
         radius: width / 2
-        color: slider.cutoutColor !== undefined ? slider.cutoutColor : Colors.backgroundPrimary
+        color: Colors.accentPrimary
-        x: Math.max(0, Math.min(parent.width - width,
+        opacity: root.pressed ? 0.16 : 0.0
-                                slider.visualPosition * (parent.width - knobDiameter) - cutoutExtra / 2))
-        y: (parent.height - height) / 2
-      }
-    }
-
-    handle: Item {
-      width: knob.implicitWidth
-      height: knob.implicitHeight
-      x: slider.leftPadding + slider.visualPosition * (slider.availableWidth - width)
-      y: slider.topPadding + slider.availableHeight / 2 - height / 2
-
-      // Subtle shadow for a more polished look (keeps theme colors)
-      MultiEffect {
-        anchors.fill: knob
-        source: knob
-        shadowEnabled: true
-        shadowColor: Colors.shadow
-        shadowOpacity: 0.25
-        shadowHorizontalOffset: 0
-        shadowVerticalOffset: 1
-        shadowBlur: 8
-      }
-
-      Rectangle {
-        id: knob
-        implicitWidth: knobDiameter
-        implicitHeight: knobDiameter
-        radius: width * 0.5
-        color: slider.pressed ? Colors.surfaceVariant : Colors.surface
-        border.color: Colors.accentPrimary
-        border.width: Math.max(1, Style.borderThick * scaling)
-
-        // Press feedback halo (using accent color, low opacity)
-        Rectangle {
-          anchors.centerIn: parent
-          width: parent.width + 8 * scaling
-          height: parent.height + 8 * scaling
-          radius: width / 2
-          color: Colors.accentPrimary
-          opacity: slider.pressed ? 0.16 : 0.0
-        }
       }
     }
   }