Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

change color of slider in qml



  • this is my code:

    import QtQuick 2.0
    import QtQuick.Extras 1.4
    import QtQuick.Window 2.10
    import QtQuick.Controls 2.4
    import QtQuick.Controls.Styles 1.4
    
    
    Item {
    
        Slider {
            id: sliderview
            x: 207
            y: 164
            snapMode: Slider.NoSnap
            from: 1
            value: 1
            to: 100
           
            
            
           }
    
    }
    
    

    I want to change color of my slider,now color are gray and black..I want to change, I saw tutorial but they change color of groove,
    thanks



  • @vale88 I solved:

    import QtQuick 2.12
    import QtQuick.Controls 2.12
    
    Slider {
        id: control
        value: 0.5
    
        background: Rectangle {
            x: control.leftPadding
            y: control.topPadding + control.availableHeight / 2 - height / 2
            implicitWidth: 200
            implicitHeight: 4
            width: control.availableWidth
            height: implicitHeight
            radius: 2
            color: "#000000"
    
            Rectangle {
                width: control.visualPosition * parent.width
                height: parent.height
                color: "#ffd1dc"
                radius: 2
            }
        }
    
        handle: Rectangle {
            x: control.leftPadding + control.visualPosition * (control.availableWidth - width)
            y: control.topPadding + control.availableHeight / 2 - height / 2
            implicitWidth: 26
            implicitHeight: 26
            radius: 13
            color: control.pressed ? "#f0f0f0" : "#f6f6f6"
            border.color: "#bdbebf"
        }
    }
    
    


  • @vale88 I solved:

    import QtQuick 2.12
    import QtQuick.Controls 2.12
    
    Slider {
        id: control
        value: 0.5
    
        background: Rectangle {
            x: control.leftPadding
            y: control.topPadding + control.availableHeight / 2 - height / 2
            implicitWidth: 200
            implicitHeight: 4
            width: control.availableWidth
            height: implicitHeight
            radius: 2
            color: "#000000"
    
            Rectangle {
                width: control.visualPosition * parent.width
                height: parent.height
                color: "#ffd1dc"
                radius: 2
            }
        }
    
        handle: Rectangle {
            x: control.leftPadding + control.visualPosition * (control.availableWidth - width)
            y: control.topPadding + control.availableHeight / 2 - height / 2
            implicitWidth: 26
            implicitHeight: 26
            radius: 13
            color: control.pressed ? "#f0f0f0" : "#f6f6f6"
            border.color: "#bdbebf"
        }
    }
    
    


  • @vale88 said in change color of slider in qml:

    I solved:

    Thank you for sharing. Please don't forget to mark your post as such!



  • @Pablo-J-Rogina I marked as solved


Log in to reply