Accessing SliderStyle's components to change opacity

MoaMoaK

Hi everyone, I'm trying to customize a Slider in order to make the handle visible only when the user is hovering above the slider. So I tryed using states and PorpertyChanges to change the opacity, but I can't target the handle. I'm guessing it's because it's no a direct sub-component of the root but more like a component of a property.

Here is my code (a bit simplified) :

import QtQuick 2.0
import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4

Slider {
    anchors {
        fill: parent
        margins: 10;
    }
    id: slider
    value: 0.5
    style : SliderStyle {
        groove: Rectangle {
            id: background
            /* ... */
        }
        handle: Rectangle {
            id: handle
            /* ... */
            opacity: 0.0
        }
    }

    MouseArea {
        anchors.fill: parent
        hoverEnabled: true
        onEntered: { slider.state = "hovered" }
        onExited: { slider.state = "" }
    }

    states: [
        State {
            name: "hovered"
            PropertyChanges { target: handle ; opacity: 1.0 } // This part does not works
        }
    ]
}

When rendering it with qmlscene, I get the error :

file.qml:68: ReferenceError: handle is not defined

Can anyone help me change the opacity of the handle ? Thx

MoaMoaK

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" } ]
}