Make Slider generic component in UM. Make Infill slider into generic SingleSettinSlider which will work for any setting now.

Change slider theme slighly.

CURA-9793

resources/qml/PrintSetupSelector/Recommended/InfillSlider.qml

@@ -1,145 +0,0 @@
-// Copyright (c) 2022 UltiMaker
-// Cura is released under the terms of the LGPLv3 or higher.
-
-import QtQuick 2.7
-import QtQuick.Controls 2.15
-
-import UM 1.5 as UM
-import Cura 1.0 as Cura
-import QtQuick.Layouts 1.3
-
-RowLayout
-{
-    height: childrenRect.height
-    spacing: UM.Theme.getSize("default_margin").width
-
-    anchors
-    {
-        left: strengthSection.right
-        right: parent.right
-        verticalCenter: strengthSection.verticalCenter
-    }
-
-    UM.SettingPropertyProvider
-    {
-        id: infillDensity
-        containerStackId: Cura.MachineManager.activeStackId
-        key: "infill_sparse_density"
-        watchedProperties: [ "value" ]
-        storeIndex: 0
-    }
-
-    UM.Label { Layout.fillWidth: false; text: "0" }
-
-    Slider
-    {
-        id: infillSlider
-        Layout.fillWidth: true
-
-        width: parent.width
-
-        from: 0; to: 100; stepSize: 1
-
-        // disable slider when gradual support is enabled
-        enabled: parseInt(infillSteps.properties.value) == 0
-
-        // set initial value from stack
-        value: parseInt(infillDensity.properties.value)
-
-        //Draw line
-        background: Rectangle
-        {
-            id: backgroundLine
-            height: UM.Theme.getSize("print_setup_slider_groove").height
-            width: parent.width - UM.Theme.getSize("print_setup_slider_handle").width
-            anchors.horizontalCenter: parent.horizontalCenter
-            anchors.verticalCenter: parent.verticalCenter
-            color: UM.Theme.getColor("lining")
-
-            Repeater
-            {
-                id: repeater
-                anchors.fill: parent
-                model: 11
-
-                Rectangle
-                {
-                    color: UM.Theme.getColor("lining")
-                    implicitWidth: UM.Theme.getSize("print_setup_slider_tickmarks").width
-                    implicitHeight: UM.Theme.getSize("print_setup_slider_tickmarks").height
-                    anchors.verticalCenter: parent.verticalCenter
-
-                    x: Math.round(backgroundLine.width / (repeater.count - 1) * index - width / 2)
-
-                    radius: Math.round(width / 2)
-                }
-            }
-        }
-
-        handle: Rectangle
-        {
-            id: handleButton
-            x: infillSlider.leftPadding + infillSlider.visualPosition * (infillSlider.availableWidth - width)
-            anchors.verticalCenter: parent.verticalCenter
-            implicitWidth: UM.Theme.getSize("print_setup_slider_handle").width
-            implicitHeight: UM.Theme.getSize("print_setup_slider_handle").height
-            radius: Math.round(width / 2)
-            color: UM.Theme.getColor("main_background")
-            border.color: UM.Theme.getColor("primary")
-            border.width: UM.Theme.getSize("wide_lining").height
-        }
-
-        UM.PointingRectangle
-        {
-            arrowSize: UM.Theme.getSize("button_tooltip_arrow").width
-            width: childrenRect.width
-            height: childrenRect.height
-            target: Qt.point(handleButton.x + handleButton.width / 2, handleButton.y + handleButton.height / 2)
-            x: handleButton.x + Math.round((handleButton.width - width) / 2)
-            y: handleButton.y - height - UM.Theme.getSize("button_tooltip_arrow").height - UM.Theme.getSize("narrow_margin").height
-            color: UM.Theme.getColor("tooltip");
-
-            UM.Label
-            {
-                text: `${infillSlider.value}%`
-                horizontalAlignment: TextInput.AlignHCenter
-                leftPadding: UM.Theme.getSize("narrow_margin").width
-                rightPadding: UM.Theme.getSize("narrow_margin").width
-                color: UM.Theme.getColor("tooltip_text");
-            }
-        }
-
-        Connections
-        {
-            target: infillSlider
-            function onValueChanged()
-            {
-                // Work around, the `infillDensity.properties.value` is initially `undefined`. As
-                // `parseInt(infillDensity.properties.value)` is parsed as 0 and is initially set as
-                // the slider value. By setting this 0 value an update is triggered setting the actual
-                // infill value to 0.
-                if (isNaN(parseInt(infillDensity.properties.value)))
-                {
-                    return;
-                }
-
-                // Don't update if the setting value, if the slider has the same value
-                if (parseInt(infillDensity.properties.value) == infillSlider.value)
-                {
-                    return;
-                }
-
-                // Round the slider value to the nearest multiple of 10 (simulate step size of 10)
-                const roundedSliderValue = Math.round(infillSlider.value / 10) * 10;
-
-                // Update the slider value to represent the rounded value
-                infillSlider.value = roundedSliderValue;
-
-                Cura.MachineManager.setSettingForAllExtruders("infill_sparse_density", "value", roundedSliderValue)
-                Cura.MachineManager.resetSettingForAllExtruders("infill_line_distance")
-            }
-        }
-    }
-
-    UM.Label { Layout.fillWidth: false; text: "100" }
-}

resources/qml/PrintSetupSelector/Recommended/RecommendedSettingSection.qml

@@ -5,7 +5,7 @@ import QtQuick 2.10
 import QtQuick.Controls 2.3
 import QtQuick.Layouts 2.10
 
-import UM 1.6 as UM
+import UM 1.7 as UM
 import Cura 1.7 as Cura
 
 Item

resources/qml/PrintSetupSelector/Recommended/RecommendedStrengthSelector.qml

@@ -17,15 +17,34 @@ RecommendedSettingSection
     enableSectionVisible: false
     enableSectionEnabled: false
 
+    UM.SettingPropertyProvider
+    {
+        id: infillSteps
+        containerStackId: Cura.MachineManager.activeStackId
+        key: "gradual_infill_steps"
+        watchedProperties: ["value", "enabled"]
+        storeIndex: 0
+    }
+
     contents: [
         RecommendedSettingItem
         {
             settingName: catalog.i18nc("@action:label", "Infill Density")
             tooltipText: catalog.i18nc("@label", "Gradual infill will gradually increase the amount of infill towards the top.")
-            settingControl: InfillSlider
+            settingControl: Cura.SingleSettingSlider
             {
                 height: UM.Theme.getSize("combobox").height
                 width: parent.width
+                settingName: "infill_sparse_density"
+                roundToNearestTen: true
+                // disable slider when gradual support is enabled
+                enabled: parseInt(infillSteps.properties.value) == 0
+
+                function updateSetting(value)
+                {
+                    Cura.MachineManager.setSettingForAllExtruders("infill_sparse_density", "value", value)
+                    Cura.MachineManager.resetSettingForAllExtruders("infill_line_distance")
+                }
             }
         },
         RecommendedSettingItem

resources/qml/Widgets/SingleSettingSlider.qml

@@ -0,0 +1,109 @@
+// Copyright (c) 2022 UltiMaker
+// Cura is released under the terms of the LGPLv3 or higher.
+
+import QtQuick 2.7
+import QtQuick.Controls 2.15
+
+import UM 1.7 as UM
+import Cura 1.7 as Cura
+import QtQuick.Layouts 1.3
+
+RowLayout
+{
+    height: childrenRect.height
+    spacing: UM.Theme.getSize("default_margin").width
+
+    property alias settingName: settingPropertyProvider.key
+    property alias enabled: settingSlider.enabled
+
+    property bool roundToNearestTen: false
+    property int maxValue: 100
+    property int minValue: 0
+
+    anchors
+    {
+        left: strengthSection.right
+        right: parent.right
+        verticalCenter: strengthSection.verticalCenter
+    }
+
+    UM.SettingPropertyProvider
+    {
+        id: settingPropertyProvider
+        containerStackId: Cura.MachineManager.activeStackId
+        watchedProperties: [ "value" ]
+        storeIndex: 0
+
+    }
+
+    UM.Label { Layout.fillWidth: false; text: minValue }
+
+    UM.Slider
+    {
+        id: settingSlider
+        Layout.fillWidth: true
+
+        width: parent.width
+
+        from: minValue; to: maxValue; stepSize: 1
+
+        // set initial value from stack
+        value: parseInt(settingPropertyProvider.properties.value)
+
+        // When the slider is released trigger an update immediately. This forces the slider to snap to the rounded value.
+        onPressedChanged: if(!pressed) { parseValueUpdateSetting() }
+    }
+
+    UM.Label { Layout.fillWidth: false; text: maxValue }
+
+    Connections
+    {
+        target: settingPropertyProvider
+        function onContainerStackChanged() { updateTimer.restart() }
+        function onIsValueUsedChanged() { updateTimer.restart() }
+    }
+
+    // Updates to the setting are delayed by interval. This stops lag caused by calling the
+    // parseValueUpdateSetting() function being call repeatedly while dragging the slider.
+    Timer
+    {
+        id: updateTimer
+        interval: 100
+        repeat: false
+        onTriggered:
+        {
+            parseValueUpdateSetting()
+        }
+    }
+
+    function parseValueUpdateSetting()
+    {
+        // Work around, the `settingPropertyProvider.properties.value` is initially `undefined`. As
+        // `parseInt(settingPropertyProvider.properties.value)` is parsed as 0 and is initially set as
+        // the slider value. By setting this 0 value an update is triggered setting the actual
+        // sitting value to 0.
+        if (isNaN(parseInt(settingPropertyProvider.properties.value)))
+        {
+            return;
+        }
+
+        // Don't update if the setting value, if the slider has the same value
+        if (parseInt(settingPropertyProvider.properties.value) == settingSlider.value)
+        {
+            return;
+        }
+
+        // Round the slider value to the nearest multiple of 10 (simulate step size of 10)
+        const roundedSliderValue = roundToNearestTen ? Math.round(settingSlider.value / 10) * 10 : Math.round(settingSlider.value)
+
+        // Update the slider value to represent the rounded value
+        settingSlider.value = roundedSliderValue;
+
+        updateSetting(roundedSliderValue);
+    }
+
+    // Override this function to update a setting differently
+    function updateSetting(value) {
+        propertyProvider.setPropertyValue("value", value)
+    }
+}

resources/qml/qmldir

@@ -41,6 +41,7 @@ MenuSeparator       1.0 MenuSeparator.qml
 SingleSettingExtruderSelectorBar        1.7 SingleSettingExtruderSelectorBar.qml
 ExtruderButton                          1.7 ExtruderButton.qml
 SingleSettingComboBox                   1.7 SingleSettingComboBox.qml
+SingleSettingSlider                     1.7 SingleSettingSlider.qml
 
 
 # Cura/MachineSettings

resources/themes/cura-light/theme.json

@@ -492,7 +492,7 @@
         "print_setup_extruder_box": [0.0, 6.0],
         "print_setup_slider_groove": [0.16, 0.16],
         "print_setup_slider_handle": [1.3, 1.3],
-        "print_setup_slider_tickmarks": [0.5, 0.5],
+        "print_setup_slider_tickmarks": [0.3, 0.3],
         "print_setup_big_item": [28, 2.5],
         "print_setup_icon": [1.2, 1.2],
         "drag_icon": [1.416, 0.25],