Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. Accessing SliderStyle's components to change opacity
Forum Updated to NodeBB v4.3 + New Features

Accessing SliderStyle's components to change opacity

Scheduled Pinned Locked Moved Solved QML and Qt Quick
sliderstyleaccessiblestatestarget
2 Posts 1 Posters 1.2k Views
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • M Offline
    M Offline
    MoaMoaK
    wrote on last edited by
    #1

    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

    1 Reply Last reply
    0
    • M Offline
      M Offline
      MoaMoaK
      wrote on last edited by
      #2

      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" } ]
      }
      
      1 Reply Last reply
      0

      • Login

      • Login or register to search.
      • First post
        Last post
      0
      • Categories
      • Recent
      • Tags
      • Popular
      • Users
      • Groups
      • Search
      • Get Qt Extensions
      • Unsolved