QtQuick Controls 2 slider handle loses press on touch

import QtQuick 2.7
import QtQuick.Window 2.2
import QtQuick.Controls 1.4
import QtPositioning 5.6
import QtLocation 5.9
import QtQuick.Controls.Styles 1.4
import QtQuick.Controls 2.1 as C2


Window {
    id: win
    visible: true
    width: 640
    height: 640

    Map {
        id: map
        anchors.fill: parent
        opacity: 1.0
        color: 'transparent'
        plugin: Plugin { name: "esri" }
        center: QtPositioning.coordinate(45,10)
        activeMapType: map.supportedMapTypes[0]
        zoomLevel: 4


        Row {
            id: containerRow

            z: parent.z + 1
            property var mapSource: map
            property real fontSize : 14
            property color labelBackground : "transparent"
            property int edge: Qt.RightEdge

            function rightEdge() {
                return (containerRow.edge === Qt.RightEdge);
            }

            layoutDirection: containerRow.rightEdge() ? Qt.LeftToRight : Qt.RightToLeft
            anchors.top: parent.top
            anchors.bottom: parent.bottom
            anchors.right: containerRow.rightEdge() ? parent.right : undefined
            anchors.left: containerRow.rightEdge() ? undefined : parent.left

            Button {
                id: sliderToggler
                width: 32
                height: 96
                checkable: true
                checked: true
                anchors.verticalCenter: parent.verticalCenter

                transform:  Scale {
                                origin.x: containerRow.rightEdge() ? 0 : sliderToggler.width / 2
                                xScale: containerRow.rightEdge() ? 1 : -1
                            }

                style:  ButtonStyle {
                            background: Rectangle {
                                color: "transparent"
                            }
                        }

                property real shear: 0.333
                property real buttonOpacity: 0.5
                property real mirror : containerRow.rightEdge() ? 1.0 : -1.0

                Rectangle {
                    width: 16
                    height: 48
                    color: "seagreen"
                    antialiasing: true
                    opacity: sliderToggler.buttonOpacity
                    anchors.top: parent.top
                    anchors.left: sliderToggler.checked ?  parent.left : parent.horizontalCenter
                    transform: Matrix4x4 {
                        property real d : sliderToggler.checked ? 1.0 : -1.0
                        matrix:    Qt.matrix4x4(1.0,  d * sliderToggler.shear,    0.0,    0.0,
                                                0.0,    1.0,    0.0,    0.0,
                                                0.0,    0.0,    1.0,    0.0,
                                                0.0,    0.0,    0.0,    1.0)
                    }
                }

                Rectangle {
                    width: 16
                    height: 48
                    color: "seagreen"
                    antialiasing: true
                    opacity: sliderToggler.buttonOpacity
                    anchors.top: parent.verticalCenter
                    anchors.right: sliderToggler.checked ?  parent.right : parent.horizontalCenter
                    transform: Matrix4x4 {
                        property real d : sliderToggler.checked ? -1.0 : 1.0
                        matrix:    Qt.matrix4x4(1.0,  d * sliderToggler.shear,    0.0,    0.0,
                                                0.0,    1.0,    0.0,    0.0,
                                                0.0,    0.0,    1.0,    0.0,
                                                0.0,    0.0,    0.0,    1.0)
                    }
                }
            }

            Rectangle {
                id: sliderContainer
                height: parent.height
                width: sliderRow.width + 10
                visible: sliderToggler.checked
                color: Qt.rgba( 0, 191 / 255.0, 255 / 255.0, 0.07)

                property var labelBorderColor: "transparent"
                property var slidersHeight : sliderContainer.height
                                             - rowSliderValues.height
                                             - rowSliderLabels.height
                                             - sliderColumn.spacing * 2
                                             - sliderColumn.topPadding
                                             - sliderColumn.bottomPadding

                Column {
                    id: sliderColumn
                    spacing: 10
                    topPadding: 16
                    bottomPadding: 48
                    anchors.centerIn: parent

                    // the sliders value labels
                    Row {
                        id: rowSliderValues
                        spacing: sliderRow.spacing
                        width: sliderRow.width
                        height: 32
                        property real entryWidth: zoomSlider.width

                        Rectangle{
                            color: containerRow.labelBackground
                            height: parent.height
                            width: parent.entryWidth
                            border.color: sliderContainer.labelBorderColor
                            Label {
                                id: labelZoomValue
                                text: zoomSlider.value.toFixed(3)
                                font.pixelSize: containerRow.fontSize
                                rotation: -90
                                anchors.centerIn: parent
                            }
                        }
                        Rectangle{
                            color: containerRow.labelBackground
                            height: parent.height
                            width: parent.entryWidth
                            border.color: sliderContainer.labelBorderColor
                            Label {
                                id: labelBearingValue
                                text: bearingSlider.value.toFixed(2)
                                font.pixelSize: containerRow.fontSize
                                rotation: -90
                                anchors.centerIn: parent
                            }
                        }
                        Rectangle{
                            color: containerRow.labelBackground
                            height: parent.height
                            width: parent.entryWidth
                            border.color: sliderContainer.labelBorderColor
                            Label {
                                id: labelTiltValue
                                text: tiltSlider.value.toFixed(2)
                                font.pixelSize: containerRow.fontSize
                                rotation: -90
                                anchors.centerIn: parent
                            }
                        }
                        Rectangle{
                            color: containerRow.labelBackground
                            height: parent.height
                            width: parent.entryWidth
                            border.color: sliderContainer.labelBorderColor
                            Label {
                                id: labelFovValue
                                text: fovSlider.value.toFixed(2)
                                font.pixelSize: containerRow.fontSize
                                rotation: -90
                                anchors.centerIn: parent
                            }
                        }
                    } // rowSliderValues

                    // The sliders row
                    Row {
                        spacing: 0
                        id: sliderRow
                        height: sliderContainer.slidersHeight

                        C2.Slider {
                            Rectangle {
                                anchors.fill: parent
                                color : "transparent"
                                border.color: "red"
                            }

                            id: zoomSlider
                            height: parent.height
                            orientation : Qt.Vertical
                            from : containerRow.mapSource.minimumZoomLevel
                            to : containerRow.mapSource.maximumZoomLevel
                            value : containerRow.mapSource.zoomLevel
                            onValueChanged: {
                                    containerRow.mapSource.zoomLevel = value
                            }
                        }
                        C2.Slider {
                            Rectangle {
                                anchors.fill: parent
                                color : "transparent"
                                border.color: "red"
                            }
                            id: bearingSlider
                            height: parent.height
                            from: 0
                            to: 360
                            orientation : Qt.Vertical
                            value: containerRow.mapSource.bearing
                            onValueChanged: {
                                containerRow.mapSource.bearing = value;
                            }
                        }
                        C2.Slider {
                            Rectangle {
                                anchors.fill: parent
                                color : "transparent"
                                border.color: "red"
                            }
                            id: tiltSlider
                            height: parent.height
                            orientation : Qt.Vertical
                            from: containerRow.mapSource.minimumTilt;
                            to: containerRow.mapSource.maximumTilt
                            value: containerRow.mapSource.tilt
                            onValueChanged: {
                                containerRow.mapSource.tilt = value;
                            }
                        }
                        C2.Slider {
                            Rectangle {
                                anchors.fill: parent
                                color : "transparent"
                                border.color: "red"
                            }
                            id: fovSlider
                            height: parent.height
                            orientation : Qt.Vertical
                            from: containerRow.mapSource.minimumFieldOfView
                            to: containerRow.mapSource.maximumFieldOfView
                            value: containerRow.mapSource.fieldOfView
                            onValueChanged: {
                                containerRow.mapSource.fieldOfView = value;
                            }
                        }
                    } // Row sliders

                    // The labels row
                    Row {
                        id: rowSliderLabels
                        spacing: sliderRow.spacing
                        width: sliderRow.width
                        property real entryWidth: zoomSlider.width
                        property real entryHeight: 64

                        Rectangle{
                            color: containerRow.labelBackground
                            height: parent.entryHeight
                            width: parent.entryWidth
                            border.color: sliderContainer.labelBorderColor
                            Label {
                                id: labelZoom
                                text: "Zoom"
                                font.pixelSize: containerRow.fontSize
                                rotation: -90
                                anchors.centerIn: parent
                            }
                        }

                        Rectangle{
                            color: containerRow.labelBackground
                            height: parent.entryHeight
                            width: parent.entryWidth
                            border.color: sliderContainer.labelBorderColor
                            Label {
                                id: labelBearing
                                text: "Bearing"
                                font.pixelSize: containerRow.fontSize
                                rotation: -90
                                anchors.centerIn: parent
                            }
                        }
                        Rectangle{
                            color: containerRow.labelBackground
                            height: parent.entryHeight
                            width: parent.entryWidth
                            border.color: sliderContainer.labelBorderColor
                            Label {
                                id: labelTilt
                                text: "Tilt"
                                font.pixelSize: containerRow.fontSize
                                rotation: -90
                                anchors.centerIn: parent
                            }
                        }
                        Rectangle{
                            color: containerRow.labelBackground
                            height: parent.entryHeight
                            width: parent.entryWidth
                            border.color: sliderContainer.labelBorderColor
                            Label {
                                id: labelFov
                                text: "FoV"
                                font.pixelSize: containerRow.fontSize
                                rotation: -90
                                anchors.centerIn: parent
                            }
                        }
                    } // rowSliderLabels
                } // Column
            } // sliderContainer
        } // containerRow
    }
}