OK
found a solution, for those interested, it's based on the fact that maybe the root item can't access the handle but the handle on the other hand can access the root item. So I created a binding between handle's state and slider's state :
Slider {
anchors {
fill: parent
margins: 10;
}
id: slider
value: 0.5
style : SliderStyle {
groove: Rectangle {
id: background
/* ... */
}
handle: Rectangle {
id: handle
/* ... */
opacity: 0.0
// Bind slider's state and handle's state
state: slider.state == "hovered" ? "hovered" : ""
states : [
State {
name: "hovered"
PropertyChanges { target: handle ; opacity: 1.0 }
}
]
}
}
MouseArea {
anchors.fill: parent
hoverEnabled: true
onEntered: { slider.state = "hovered" }
onExited: { slider.state = "" }
}
states: [ State { name: "hovered" } ]
}
