Component Showcase Demo App
import QtQuick 2.1
Rectangle {
id: root
color: "transparent"
radius: dp(6)
property alias value: grip.value
property color fillColor: "#14aaff"
property real gripSize: 40
property real increment: 0.1
property bool enabled: true
Rectangle {
id: slider
anchors {
left: parent.left
right: parent.right
verticalCenter: parent.verticalCenter
}
height: dp(10)
color: "transparent"
BorderImage {
id: sliderbarimage
source: "../../../assets/qmlvideofx/Slider_bar.png"
anchors { fill: parent; margins: 1 }
border.right: 5
border.left: 5
}
Rectangle {
height: parent.height - dp(2)
anchors.left: parent.left
anchors.right: grip.horizontalCenter
color: root.fillColor
radius: dp(6)
border.width: 1
border.color: Qt.darker(color, 1.3)
opacity: 0.8
}
Rectangle {
id: grip
property real value: 0.5
x: (value * parent.width) - width/2
anchors.verticalCenter: parent.verticalCenter
width: Math.max(dp(48), root.gripSize)
height: width
radius: width/2
color: "transparent"
Image {
id: sliderhandleimage
source: "../../../assets/qmlvideofx/Slider_handle.png"
anchors.centerIn: parent
width: root.gripSize
height: width / sourceSize.width * sourceSize.height
}
MouseArea {
id: mouseArea
enabled: root.enabled
anchors.fill: parent
drag {
target: grip
axis: Drag.XAxis
minimumX: -parent.width/2
maximumX: root.width - parent.width/2
}
onPositionChanged: {
if (drag.active)
updatePosition()
}
onReleased: {
updatePosition()
}
function updatePosition() {
value = (grip.x + grip.width/2) / slider.width
}
}
}