Move Flickable/ListView using Slider QML - qt

Question

I need to scroll a Flickable/ListView using a Slider rather than a scrollbar, If I use a ScrollBar everything works perfect but I need a visual experience like a slider(A round handle and a path line). As In vertical scrollBar we can't set height of the handle and in the horizontal scrollbar, we can't set width of the handle. Due to this limitation, I used the slider itself to scroll a Flickable/ListView. Following is the code:
import QtQuick 2.6
import QtQuick.Window 2.2
import QtQuick.Controls 2.2
Window {
id:window
visible: true
width: 640
height: 480
title: qsTr("Hello World")
Flickable{
id:flick
width : parent.width * 0.70
height : parent.height * 0.70
contentWidth: contentItem.childrenRect.width
contentHeight: contentItem.childrenRect.height
contentX:(contentWidth - width) * horSlider.position
contentY:(contentHeight-height) * verSlider.position
clip:true
Grid{
id:grid
columns: 5
spacing:50
Repeater{
id:rept
model:20
Button{
width: 100
height : 100
text:"Btn "+index
}
}
}
}
Slider{
id:horSlider
anchors.top:flick.bottom
anchors.left:flick.left
anchors.right:flick.right
}
Slider{
id:verSlider
orientation: Qt.Vertical
anchors.top:flick.top
anchors.bottom:flick.bottom
anchors.left:flick.right
rotation: 180
}
}
1) If I move the sliders Flickable is moving as expected but if Interactive flag is enabled then how to move the sliders if user flicks with the fingers rather than using sliders?
2) Is there any way to design a scrollBar similar to Slider (A round handle with a path Line)?

Answer 1

Here's an example how to connect Flickable and Sliders together. Notice that vertical slider's handle is at the bottom when the position is 0, so you need to invert the position.
import QtQuick 2.6
import QtQuick.Window 2.2
import QtQuick.Controls 2.0
Window {
id: window
width: 360
height: 360
visible: true
Flickable {
id: flickable
anchors.fill: parent
contentWidth: dummyContent.width
contentHeight: dummyContent.height
Text {
id: dummyContent
text: "ABC"
color: "red"
font.pixelSize: 512
}
}
Slider {
id: hslider
anchors.left: parent.left
anchors.right: vslider.left
anchors.bottom: parent.bottom
value: flickable.contentX / (flickable.contentWidth - flickable.width)
Binding {
target: flickable
property: "contentX"
value: hslider.position * (flickable.contentWidth - flickable.width)
when: hslider.pressed
}
}
Slider {
id: vslider
orientation: Qt.Vertical
anchors.top: parent.top
anchors.right: parent.right
anchors.bottom: hslider.top
value: 1.0 - (flickable.contentY / (flickable.contentHeight - flickable.height))
Binding {
target: flickable
property: "contentY"
value: (1.0 - vslider.position) * (flickable.contentHeight - flickable.height)
when: vslider.pressed
}
}
}