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,71 +96,99 @@ 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
-        Loader {
+        Repeater {
-            anchors {
+            model: background.leftWidths.length
-                verticalCenter: parent.verticalCenter
+
-                left: parent.left
+            Loader {
-            }
+                required property real index
-            width: root.handleMargins + (root.visualPosition * root.effectiveDraggingWidth) - (root.handleWidth / 2 + root.handleMargins)
+                anchors {
-            height: root.trackWidth
+                    verticalCenter: background.verticalCenter
-            active: !root.wavy
+                }
-            sourceComponent: Rectangle {
+                property real leftMargin: index > 0 ? root.dividerMargins : 0
-                color: root.highlightColor
+                property real rightMargin: index < background.leftWidths.length - 1 ? root.dividerMargins : root.handleMargins
-                topLeftRadius: root.trackRadius
+                x: background.leftValues[index] * root.effectiveDraggingWidth + leftMargin
-                bottomLeftRadius: root.trackRadius
+                width: background.leftWidths[index] * root.effectiveDraggingWidth - leftMargin - rightMargin - (index === background.leftWidths.length - 1 ? handleWidth / 2 : 0)
-                topRightRadius: root.unsharpenRadius
+                height: root.trackWidth
-                bottomRightRadius: root.unsharpenRadius
+                active: !root.wavy
+                sourceComponent: Rectangle {
+                    color: root.highlightColor
+                    topLeftRadius: index === 0 ? root.trackRadius : root.unsharpenRadius
+                    bottomLeftRadius: index === 0 ? root.trackRadius : root.unsharpenRadius
+                    topRightRadius: root.unsharpenRadius
+                    bottomRightRadius: root.unsharpenRadius
+                }
             }
         }
 
-        Loader {
+        Repeater {
-            anchors {
+            model: background.leftWidths.length
-                verticalCenter: parent.verticalCenter
+
-                left: parent.left
+            Loader {
-            }
+                required property int index
-            width: root.handleMargins + (root.visualPosition * root.effectiveDraggingWidth) - (root.handleWidth / 2 + root.handleMargins)
+                anchors {
-            height: root.height
+                    verticalCenter: background.verticalCenter
-            active: root.wavy
-            sourceComponent: WavyLine {
-                id: wavyFill
-                frequency: root.waveFrequency
-                fullLength: root.width
-                color: root.highlightColor
-                amplitudeMultiplier: root.wavy ? 0.5 : 0
-                width: root.handleMargins + (root.visualPosition * root.effectiveDraggingWidth) - (root.handleWidth / 2 + root.handleMargins)
-                height: root.trackWidth
-                Connections {
-                    target: root
-                    function onValueChanged() { wavyFill.requestPaint(); }
-                    function onHighlightColorChanged() { wavyFill.requestPaint(); }
                 }
-                FrameAnimation {
+                property real leftMargin: index > 0 ? root.dividerMargins : 0
-                    running: root.animateWave
+                property real rightMargin: index < background.leftWidths.length - 1 ? root.dividerMargins : root.handleMargins
-                    onTriggered: {
+                x: background.leftValues[index] * root.effectiveDraggingWidth + leftMargin
-                        wavyFill.requestPaint()
+                width: background.leftWidths[index] * root.effectiveDraggingWidth - leftMargin - rightMargin - (index === background.leftWidths.length - 1 ? handleWidth / 2 : 0)
+                height: root.height
+                active: root.wavy
+                sourceComponent: WavyLine {
+                    id: wavyFill
+                    frequency: root.waveFrequency
+                    fullLength: root.width
+                    color: root.highlightColor
+                    amplitudeMultiplier: root.wavy ? 0.5 : 0
+                    width: parent.width
+                    height: root.trackWidth
+                    Connections {
+                        target: root
+                        function onValueChanged() { wavyFill.requestPaint(); }
+                        function onHighlightColorChanged() { wavyFill.requestPaint(); }
+                    }
+                    FrameAnimation {
+                        running: root.animateWave
+                        onTriggered: {
+                            wavyFill.requestPaint()
+                        }
                     }
                 }
-            }   
+            }
         }
 
         // Fill right
-        Rectangle {
+        Repeater {
-            anchors {
+            model: background.rightWidths.length
-                verticalCenter: parent.verticalCenter
+
-                right: parent.right
+            Rectangle {
+                required property int index
+                anchors {
+                    verticalCenter: background.verticalCenter
+                }
+                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: index === background.rightWidths.length - 1 ? root.trackRadius : root.unsharpenRadius
+                bottomRightRadius: index === background.rightWidths.length - 1 ? root.trackRadius : root.unsharpenRadius
+                topLeftRadius: root.unsharpenRadius
+                bottomLeftRadius: root.unsharpenRadius
             }
-            width: root.handleMargins + ((1 - root.visualPosition) * root.effectiveDraggingWidth) - (root.handleWidth / 2 + root.handleMargins)
-            height: trackWidth
-            color: root.trackColor
-            topRightRadius: root.trackRadius
-            bottomRightRadius: root.trackRadius
-            topLeftRadius: root.unsharpenRadius
-            bottomLeftRadius: root.unsharpenRadius
         }
 
         // Stop indicators

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