adding a custom rangedslider

This commit is contained in:
Chris Cochrun 2023-04-18 15:32:42 -05:00
parent 8c89c49f4a
commit 8b231de32b
4 changed files with 132 additions and 1 deletions

View file

@ -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
}

View file

@ -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
}
}

View file

@ -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

View file

@ -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>