Move Flickable/ListView using Slider QML

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 Slider s 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
        }
    }
}