Add divider to brightness quick slider

dots/.config/quickshell/ii/modules/common/widgets/StyledSlider.qml

@@ -17,6 +17,7 @@ Slider {
     id: root
 
     property list<real> stopIndicatorValues: [1]
+    property list<real> dividerValues: []
     enum Configuration {
         Wavy = 4,
         XS = 12,
@@ -45,6 +46,7 @@ Slider {
     property real handleHeight: (configuration === StyledSlider.Configuration.Wavy) ? 24 : Math.max(33, trackWidth + 9)
     property real handleWidth: root.pressed ? handlePressedWidth : handleDefaultWidth
     property real handleMargins: 4
+    property real dividerMargins: 2
     property real trackDotSize: 3
     property bool usePercentTooltip: true
     property string tooltipContent: usePercentTooltip ? `${Math.round(((value - from) / (to - from)) * 100)}%` : `${Math.round(value)}`
@@ -94,34 +96,54 @@ Slider {
     }
 
     background: Item {
+        id: background
         anchors.verticalCenter: parent.verticalCenter
-        width: parent.width
+        anchors.horizontalCenter: parent.horizontalCenter
+        width: root.effectiveDraggingWidth
         implicitHeight: trackWidth
+        property var normalized: root.dividerValues.map(v => (v - root.from) / (root.to - root.from))
+        property var leftValues: [0, ...normalized.filter(v => v < root.visualPosition), root.visualPosition]
+        property var rightValues: [root.visualPosition, ...normalized.filter(v => v > root.visualPosition), 1]
+        property var leftWidths: leftValues.map((v, i, a) => a[i + 1] - v).slice(0, -1)
+        property var rightWidths: rightValues.map((v, i, a) => a[i + 1] - v).slice(0, -1)
 
         // Fill left
+        Repeater {
+            model: background.leftWidths.length
+
             Loader {
+                required property real index
                 anchors {
-                verticalCenter: parent.verticalCenter
+                    verticalCenter: background.verticalCenter
-                left: parent.left
                 }
-            width: root.handleMargins + (root.visualPosition * root.effectiveDraggingWidth) - (root.handleWidth / 2 + root.handleMargins)
+                property real leftMargin: index > 0 ? root.dividerMargins : 0
+                property real rightMargin: index < background.leftWidths.length - 1 ? root.dividerMargins : root.handleMargins
+                x: background.leftValues[index] * root.effectiveDraggingWidth + leftMargin
+                width: background.leftWidths[index] * root.effectiveDraggingWidth - leftMargin - rightMargin - (index === background.leftWidths.length - 1 ? handleWidth / 2 : 0)
                 height: root.trackWidth
                 active: !root.wavy
                 sourceComponent: Rectangle {
                     color: root.highlightColor
-                topLeftRadius: root.trackRadius
+                    topLeftRadius: index === 0 ? root.trackRadius : root.unsharpenRadius
-                bottomLeftRadius: root.trackRadius
+                    bottomLeftRadius: index === 0 ? root.trackRadius : root.unsharpenRadius
                     topRightRadius: root.unsharpenRadius
                     bottomRightRadius: root.unsharpenRadius
                 }
             }
+        }
+
+        Repeater {
+            model: background.leftWidths.length
 
             Loader {
+                required property int index
                 anchors {
-                verticalCenter: parent.verticalCenter
+                    verticalCenter: background.verticalCenter
-                left: parent.left
                 }
-            width: root.handleMargins + (root.visualPosition * root.effectiveDraggingWidth) - (root.handleWidth / 2 + root.handleMargins)
+                property real leftMargin: index > 0 ? root.dividerMargins : 0
+                property real rightMargin: index < background.leftWidths.length - 1 ? root.dividerMargins : root.handleMargins
+                x: background.leftValues[index] * root.effectiveDraggingWidth + leftMargin
+                width: background.leftWidths[index] * root.effectiveDraggingWidth - leftMargin - rightMargin - (index === background.leftWidths.length - 1 ? handleWidth / 2 : 0)
                 height: root.height
                 active: root.wavy
                 sourceComponent: WavyLine {
@@ -130,7 +152,7 @@ Slider {
                     fullLength: root.width
                     color: root.highlightColor
                     amplitudeMultiplier: root.wavy ? 0.5 : 0
-                width: root.handleMargins + (root.visualPosition * root.effectiveDraggingWidth) - (root.handleWidth / 2 + root.handleMargins)
+                    width: parent.width
                     height: root.trackWidth
                     Connections {
                         target: root
@@ -145,21 +167,29 @@ Slider {
                     }
                 }
             }
+        }
 
         // Fill right
+        Repeater {
+            model: background.rightWidths.length
+
             Rectangle {
+                required property int index
                 anchors {
-                verticalCenter: parent.verticalCenter
+                    verticalCenter: background.verticalCenter
-                right: parent.right
                 }
-            width: root.handleMargins + ((1 - root.visualPosition) * root.effectiveDraggingWidth) - (root.handleWidth / 2 + root.handleMargins)
+                property real leftMargin: index > 0 ? root.dividerMargins : root.handleMargins
+                property real rightMargin: index < background.rightWidths.length - 1 ? root.dividerMargins : 0
+                x: background.rightValues[index] * root.effectiveDraggingWidth + leftMargin + (index === 0 ? handleWidth / 2 : 0)
+                width: background.rightWidths[index] * root.effectiveDraggingWidth - leftMargin - rightMargin - (index === 0 ? handleWidth / 2 : 0)
                 height: trackWidth
                 color: root.trackColor
-            topRightRadius: root.trackRadius
+                topRightRadius: index === background.rightWidths.length - 1 ? root.trackRadius : root.unsharpenRadius
-            bottomRightRadius: root.trackRadius
+                bottomRightRadius: index === background.rightWidths.length - 1 ? root.trackRadius : root.unsharpenRadius
                 topLeftRadius: root.unsharpenRadius
                 bottomLeftRadius: root.unsharpenRadius
             }
+        }
 
         // Stop indicators
         Repeater {

dots/.config/quickshell/ii/modules/ii/sidebarRight/QuickSliders.qml

@@ -102,6 +102,7 @@ Rectangle {
         property string secondaryMaterialSymbol
         configuration: StyledSlider.Configuration.M
         stopIndicatorValues: []
+        dividerValues: secondaryMaterialSymbol.length > 0 ? [secondaryIcon.iconLocation] : []
         
         MaterialSymbol {
             id: icon
@@ -127,11 +128,11 @@ Rectangle {
             id: secondaryIcon
             visible: secondaryMaterialSymbol.length > 0
             property real iconLocation: 0.3
-            property bool nearIcon: iconLocation - quickSlider.value <= 0.1 && iconLocation - quickSlider.value > -0.03
+            property bool nearIcon: iconLocation - quickSlider.value <= 0.1 && iconLocation - quickSlider.value > (quickSlider.rightPadding - 7) / quickSlider.effectiveDraggingWidth
             anchors {
                 verticalCenter: quickSlider.verticalCenter
                 right: nearIcon ? quickSlider.handle.right : quickSlider.right
-                rightMargin: nearIcon ? 14 : (1 - iconLocation) * quickSlider.width
+                rightMargin: nearIcon ? 14 : (1 - iconLocation) * quickSlider.width + 7
             }
             iconSize: 20
             color: quickSlider.value >= iconLocation - 0.1 ? Appearance.colors.colOnPrimary : Appearance.colors.colOnSecondaryContainer