Using a slider under another mouse area QML / QT - qml

Question

I am designing an UI interface in Qt where one of the pages can swipe between views. I have defined a SwipeArea region in the whole screen (which is a MouseArea I defined in another QML file), to be able to swipe between pages, with the property propagateComposedEvents set to true so that I can swipe between pages, and still being able to click on all buttons.
The problem comes when using a Slider. Apparently it can't get these mouse events, and I can't interact with it because when I click on the screen it starts the swiping handler. Any idea of how can I solve this?
This is where I define the SwipeArea.qml code:
import QtQuick 2.0
MouseArea {
property point origin
property bool ready: false
signal move(int x, int y)
signal swipe(string direction)
propagateComposedEvents: true
onPressed: {
drag.axis = Drag.XAndYAxis
origin = Qt.point(mouse.x, mouse.y)
}
onPositionChanged: {
switch (drag.axis) {
case Drag.XAndYAxis:
if (Math.abs(mouse.x - origin.x) > 16) {
drag.axis = Drag.XAxis
}
else if (Math.abs(mouse.y - origin.y) > 16) {
drag.axis = Drag.YAxis
}
break
case Drag.XAxis:
move(mouse.x - origin.x, 0)
break
case Drag.YAxis:
move(0, mouse.y - origin.y)
break
}
}
onReleased: {
switch (drag.axis) {
case Drag.XAndYAxis:
canceled(mouse)
break
case Drag.XAxis:
swipe(mouse.x - origin.x < 0 ? "left" : "right")
break
case Drag.YAxis:
swipe(mouse.y - origin.y < 0 ? "up" : "down")
break
}
}
}
And here is the main.qml where I use it:
Item {
id: content
width: root.width * itemDataLength
height:parent.height
property double k: (content.width - root.width) / (img.width - root.width)
Repeater {
id:repeater
model: itemDataLength
width:parent.width
height:parent.height
Loader{
id:loader
width:parent.width / 2
x: root.width * index
height:parent.height
source:loaderItems[index]
}
}
}
SwipeArea {
id: mouse
anchors.fill: parent
onMove: {
content.x = (-root.width * currentIndex) + x
}
onSwipe: {
switch (direction) {
case "left":
if (currentIndex === itemDataLength - 1) {
currentIndexChanged()
}
else {
currentIndex++
}
break
case "right":
if (currentIndex === 0) {
currentIndexChanged()
}
else {
currentIndex--
}
break
}
}
onCanceled: {
currentIndexChanged()
}
}
Maybe important to add, my slider code:
Slider {
id: slider
anchors.centerIn: parent
updateValueWhileDragging:true
activeFocusOnPress:true
style: SliderStyle {
id:sliderStyle
//Slider handler
handle: Rectangle {
id:handler
width: 22
height: 44
radius:2
antialiasing: true
Image{
source:"icons/slidercenter.png"
anchors.centerIn: parent
}
}
//Slider Groove
groove: Item {
id:slidergroove
implicitHeight: 50
implicitWidth: temperaturePage.width -50
}
}
}
I appreciate any help or opinion, and thank you in advance!