QML Flickable Issues

Question

I need a horizontal controller consisting of a background and moving thumb-stick. It requires the following behaviours:

1. Initially centred, the thumb-stick can drag to the left or right within the background bounds.
2. When the drag is released, the thumb-stick re-centres itself.
3. If a part of the background is touched, the thumb-stick jumps to the touch.
4. If the touch is released, the thumb-stick re-centres itself.
5. If a drag is made following the touch, the thumb-stick will drag from the touched position.

Problems:

1. On touch, the thumb-stick jumps to the TouchPoint as required. However if a drag immediately follows the touch, the thumb-stick jumps back to the position it was in before the touch, before initiating the drag.

2. If the thumb-stick is dragged to the right and released, it immediately jumps back to centre as required. If it is dragged to the left boundary, there is a delay before it jumps back to centre.

Running the below code illustrates the controller working and the problems:

import QtQuick 2.0

Item {
id: horizontalController
width: 300
height: 100   

Rectangle {
    id: controllerBackground
    width: (parent.width / 3) * 2
    height: parent.height
    anchors.centerIn: parent
    color: "white"
}
Flickable
{
    id: controllerFlick
    width: parent.width / 3 * 2
    height: parent.height
    anchors.centerIn: parent
    contentX: width / 4
    contentWidth: bounds.width
    contentHeight:  bounds.height
    boundsBehavior: Flickable.StopAtBounds

    onMovementEnded: {
        contentX = width / 4
    }

    MultiPointTouchArea{
        id: controllerTouchArea
        enabled: true
        anchors.fill: bounds
        touchPoints: TouchPoint {id: controllerTouchPoint }
        onPressed: {
            controllerFlick.contentX = Math.min(Math.max(controllerBackground.width - controllerTouchPoint.x,0),controllerBackground.width / 2)
        }
        onReleased: {
            controllerFlick.contentX = controllerFlick.width / 4
        }
    }

    Item{
        id: bounds
        width: controllerFlick.width * 1.5
        height: controllerFlick.height
        Rectangle {
            id: image
            width: parent.width / 3
            height: parent.height
            anchors.centerIn: parent
            color: "red"
        }
    }
   }
}