Slider component

components/Slider.qml

@@ -0,0 +1,68 @@
+import QtQuick 2.9
+import QtQuick.Controls 2.0 as QtQuickControls
+import QtQuick.Layouts 1.1
+
+import "../components" as MoneroComponents
+
+ColumnLayout {
+    property alias from: slider.from
+    property alias stepSize: slider.stepSize
+    property alias to: slider.to
+    property alias value: slider.value
+
+    property alias text: label.text
+
+    signal moved()
+
+    spacing: 0
+
+    Text {
+        id: label
+        color: MoneroComponents.Style.defaultFontColor
+        font.pixelSize: 14
+        Layout.fillWidth: true
+    }
+
+    QtQuickControls.Slider {
+        id: slider
+        leftPadding: 0
+        snapMode: QtQuickControls.Slider.SnapAlways
+
+        background: Rectangle {
+            x: parent.leftPadding
+            y: parent.topPadding + parent.availableHeight / 2 - height / 2
+            implicitWidth: 200
+            implicitHeight: 4
+            width: parent.availableWidth
+            height: implicitHeight
+            radius: 2
+            color: MoneroComponents.Style.progressBarBackgroundColor
+
+            Rectangle {
+                width: parent.visualPosition * parent.width
+                height: parent.height
+                color: MoneroComponents.Style.green
+                radius: 2
+            }
+        }
+
+        handle: Rectangle {
+            x: parent.leftPadding + parent.visualPosition * (parent.availableWidth - width)
+            y: parent.topPadding + parent.availableHeight / 2 - height / 2
+            implicitWidth: 18
+            implicitHeight: 18
+            radius: 8
+            color: parent.pressed ? "#f0f0f0" : "#f6f6f6"
+            border.color: MoneroComponents.Style.grey
+        }
+
+        onMoved: parent.moved()
+
+        MouseArea {
+            anchors.fill: parent
+            acceptedButtons: Qt.NoButton
+            hoverEnabled: true
+            cursorShape: Qt.PointingHandCursor
+        }
+    }
+}

pages/settings/SettingsLayout.qml

@@ -101,70 +101,20 @@ Rectangle {
             text: qsTr("Lock wallet on inactivity") + translationManager.emptyString
         }
 
-        ColumnLayout {
+        MoneroComponents.Slider {
             visible: userInActivityCheckbox.checked
             Layout.fillWidth: true
             Layout.topMargin: 6
-            Layout.leftMargin: 42
-            spacing: 0
-
-            Text {
-                color: MoneroComponents.Style.defaultFontColor
-                font.pixelSize: 14
-                Layout.fillWidth: true
-                text: {
-                    var val = userInactivitySlider.value;
-                    var minutes = val > 1 ? qsTr("minutes") : qsTr("minute");
-
-                    qsTr("After ") + val + " " + minutes + translationManager.emptyString;
-                }
-            }
-
-            Slider {
-                id: userInactivitySlider
-                from: 1
-                value: persistentSettings.lockOnUserInActivityInterval
-                to: 60
-                leftPadding: 0
-                stepSize: 1
-                snapMode: Slider.SnapAlways
-
-                background: Rectangle {
-                    x: parent.leftPadding
-                    y: parent.topPadding + parent.availableHeight / 2 - height / 2
-                    implicitWidth: 200
-                    implicitHeight: 4
-                    width: parent.availableWidth
-                    height: implicitHeight
-                    radius: 2
-                    color: MoneroComponents.Style.progressBarBackgroundColor
-
-                    Rectangle {
-                        width: parent.visualPosition * parent.width
-                        height: parent.height
-                        color: MoneroComponents.Style.green
-                        radius: 2
-                    }
-                }
-
-                handle: Rectangle {
-                    x: parent.leftPadding + parent.visualPosition * (parent.availableWidth - width)
-                    y: parent.topPadding + parent.availableHeight / 2 - height / 2
-                    implicitWidth: 18
-                    implicitHeight: 18
-                    radius: 8
-                    color: parent.pressed ? "#f0f0f0" : "#f6f6f6"
-                    border.color: MoneroComponents.Style.grey
-                }
-
-                onMoved: persistentSettings.lockOnUserInActivityInterval = userInactivitySlider.value;
-                MouseArea {
-                    anchors.fill: parent
-                    acceptedButtons: Qt.NoButton
-                    hoverEnabled: true
-                    cursorShape: Qt.PointingHandCursor
-                }
+            Layout.leftMargin: 35
+            from: 1
+            stepSize: 1
+            to: 60
+            value: persistentSettings.lockOnUserInActivityInterval
+            text: {
+                var minutes = value > 1 ? qsTr("minutes") : qsTr("minute");
+                return qsTr("After ") + value + " " + minutes + translationManager.emptyString;
             }
+            onMoved: persistentSettings.lockOnUserInActivityInterval = value
         }
 
         //! Manage pricing

qml.qrc

@@ -5,6 +5,7 @@
         <file>MiddlePanel.qml</file>
         <file>components/Label.qml</file>
         <file>components/SettingsListItem.qml</file>
+        <file>components/Slider.qml</file>
         <file>components/UpdateDialog.qml</file>
         <file>images/whatIsIcon.png</file>
         <file>images/whatIsIcon@2x.png</file>