adding a custom rangedslider

src/qml/presenter/ImageEditor.qml

@@ -76,9 +76,10 @@ Item {
 
             Image {
                 id: imagePreview
-                Layout.preferredWidth: 600
+                Layout.fillWidth: true
                 Layout.preferredHeight: Layout.preferredWidth / 16 * 9
                 Layout.alignment: Qt.AlignCenter
+                Layout.fillHeight: true
                 fillMode: Image.PreserveAspectFit
                 source: image.filePath
             }

src/qml/presenter/RangedSlider.qml

@@ -0,0 +1,120 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15 as Controls
+import QtQuick.Layouts 1.15
+import org.kde.kirigami 2.13 as Kirigami
+
+Rectangle {
+    id: root
+
+    property var first
+    property var second
+
+    property real from
+    property real to
+
+    property real firstValue
+    property real secondValue
+    property real firstVisualPosition
+    property real secondVisualPosition
+
+    signal firstReleased()
+    signal secondReleased()
+
+    Kirigami.Theme.colorSet: Kirigami.Theme.Button
+
+    color: Kirigami.Theme.backgroundColor
+    border.width: 0
+    radius: width / 2
+
+    height: 6
+
+    Rectangle {
+        id: first
+        x: firstVisualPosition
+        y: -6
+        implicitWidth: 18
+        implicitHeight: 18
+        color: firstMouse.containsMouse ? Kirigami.Theme.hoverColor : Kirigami.Theme.alternateBackgroundColor
+        border.width: firstMouse.containsMouse ? 2 : 1
+        border.color: firstMouse.containsMouse ? Kirigami.Theme.hoverColor : Kirigami.Theme.backgroundColor
+        radius: width / 2
+
+        Drag.active: firstMouse.drag.active
+        Drag.hotSpot.x: width / 2
+        Drag.hotSpot.y: height / 2
+
+        /* states: State { */
+        /*     name: "dragged" */
+        /*     when: first.Drag.active */
+        /*     PropertyChanges { */
+        /*         target: first */
+        /*         x: x */
+        /*         width: width */
+        /*         height: height */
+        /*     } */
+        /* } */
+        MouseArea {
+            id: firstMouse
+            anchors.fill: parent
+            hoverEnabled: true
+            drag {
+                target: first
+                axis: Drag.XAxis
+                maximumX: root.right
+                minimumX: root.left
+            }
+            onReleased: {
+                firstValue = mouseX;
+                firstReleased();
+            }
+        }
+    }
+
+    Rectangle {
+        id: second
+        x: secondVisualPosition
+        y: -6
+        implicitWidth: 18
+        implicitHeight: 18
+        color: secondMouse.containsMouse ? Kirigami.Theme.hoverColor : Kirigami.Theme.alternateBackgroundColor
+        border.width: secondMouse.containsMouse ? 2 : 1
+        border.color: secondMouse.containsMouse ? Kirigami.Theme.hoverColor : Kirigami.Theme.backgroundColor
+        radius: width / 2
+
+        Drag.active: secondMouse.drag.active
+        Drag.hotSpot.x: width / 2
+        Drag.hotSpot.y: height / 2
+
+        /* states: State { */
+        /*     name: "dragged" */
+        /*     when: second.Drag.active */
+        /*     PropertyChanges { */
+        /*         target: second */
+        /*         x: x */
+        /*         width: width */
+        /*         height: height */
+        /*     } */
+        /* } */
+        MouseArea {
+            id: secondMouse
+            anchors.fill: parent
+            hoverEnabled: true
+            drag {
+                target: second
+                axis: Drag.XAxis
+                maximumX: root.width
+                minimumX: 0
+            }
+            onReleased: {
+                secondValue = second.x;
+                secondReleased();
+            }
+        }
+    }
+
+    Rectangle {
+        id: range
+        color: Kirigami.Theme.hoverColor
+        radius: width / 2
+    }
+}

src/qml/presenter/VideoEditor.qml

@@ -174,6 +174,15 @@ Item {
                     second.onMoved: updateEndTime(second.value)
 
                 }
+                Presenter.RangedSlider {
+                    Layout.fillWidth: true
+                    Layout.alignment: Qt.AlignHCenter
+                    Layout.leftMargin: 25
+                    Layout.rightMargin: 25
+
+                    onFirstReleased: showPassiveNotification("first")
+                    onSecondReleased: showPassiveNotification("Second")
+                }
 
                 RowLayout {
                     Layout.preferredWidth: parent.width

src/resources.qrc

@@ -22,6 +22,7 @@
         <file>qml/presenter/PreviewSlideListDelegate.qml</file>
         <file>qml/presenter/PreviewSlide.qml</file>
         <file>qml/presenter/Settings.qml</file>
+        <file>qml/presenter/RangedSlider.qml</file>
         <file>assets/parallel.jpg</file>
         <file>assets/black.jpg</file>
     </qresource>