digital clock: several improvements

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

@@ -0,0 +1,42 @@
+import qs.modules.common.widgets
+import qs.modules.common
+import QtQuick
+import QtQuick.Layouts
+
+RowLayout {
+    id: root
+    spacing: 10
+    Layout.leftMargin: 8
+    Layout.rightMargin: 8
+
+    property string text: ""
+    property string buttonIcon: ""
+    property alias value: slider.value
+    property bool usePercentTooltip: true
+    property real from: slider.from
+    property real to: slider.to
+    
+    RowLayout {
+        spacing: 10
+        OptionalMaterialSymbol {
+            id: iconWidget
+            icon: root.buttonIcon
+            iconSize: Appearance.font.pixelSize.larger
+        }
+        StyledText {
+            id: labelWidget
+            text: root.text
+            color: Appearance.colors.colOnSecondaryContainer
+        }
+    }
+    
+    StyledSlider {
+        id: slider
+        Layout.fillWidth: true
+        configuration: StyledSlider.Configuration.XS
+        usePercentTooltip: root.usePercentTooltip
+        value: root.value
+        from: root.from
+        to: root.to
+    }
+}

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

@@ -46,7 +46,8 @@ Slider {
     property real handleWidth: root.pressed ? handlePressedWidth : handleDefaultWidth
     property real handleMargins: 4
     property real trackDotSize: 3
-    property string tooltipContent: `${Math.round(value * 100)}%`
+    property bool usePercentTooltip: true
+    property string tooltipContent: usePercentTooltip ? `${Math.round(((value - from) / (to - from)) * 100)}%` : `${Math.round(value)}`
     property bool wavy: configuration === StyledSlider.Configuration.Wavy // If true, the progress bar will have a wavy fill effect
     property bool animateWave: true
     property real waveAmplitudeMultiplier: wavy ? 0.5 : 0

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

@@ -16,7 +16,7 @@ Text {
         hintingPreference: Font.PreferDefaultHinting
         family: defaultFont
         pixelSize: Appearance?.font.pixelSize.small ?? 15
-        variableAxes: shouldUseNumberFont ? ({}) : Appearance.font.variableAxes.main
+        //variableAxes: shouldUseNumberFont ? ({}) : Appearance.font.variableAxes.main
     }
     color: Appearance?.m3colors.m3onBackground ?? "black"
     linkColor: Appearance?.m3colors.m3primary