Accessing SliderStyle's components to change opacity



  • 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



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


Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.