Regarding Slider in QML



  • Hi all,

    I am using slider in QML, i have used SliderStyle and made some changes for groove and handle of the slider. the problem i am facing is, when i change the value of the slider from 0 to some other value, only the slider groove is updated to the particular value, but the slider handle remains in the initial position only.
    can anyone tell me what changes i have to make.

    here is the code :

    Slider {
        id: theSlider
    
        property alias sliderWidth: theSlider.width
        property alias sliderValue: theSlider.value
    
        width:(applicationWindow.width/3)+50
        maximumValue: 100
        minimumValue: 0
        value:minimumValue
        updateValueWhileDragging : true
        style: SliderStyle {
            groove:  Rectangle {
                id: grooveMainrect
                height: 8
                antialiasing: true
                radius: 5
                color: "#847878"
                Rectangle {
                    id: groovechildrect
                    width: (parent.width * theSlider.value)/theSlider.maximumValue
                    height: parent.height
                    color: Qt.lighter("#7ea6d6", 1.2)
                    radius: parent.radius
                }
            }
            handle: Rectangle {
                id:handlemainrect
                height: 25
                width: 25
                radius: width/2
                anchors.verticalCenter: parent.verticalCenter
                color: Qt.lighter("#7ea6d6", 1.2)
                Rectangle {
                    id: handlechildrect
                    width: parent.width/3
                    height: parent.height/3
                    anchors.centerIn: parent
                    color: "#ffffff"
                    radius: width/2
                }
            }
        }
    


  • Your code works properly on my computer. I only noticed that there was a missing " } " ending the slider component.



  • @ibia okay. Does the slider handle update when u change the slider value to some 50 or other. Because when i check separately only the slider groove is updated, but the handle remains in the same position



  • Yes the slider handle updates when I change the value. But to test your code, I replaced the applicationWindow.width with 600.

    I think that you should create a new project and put in it only the code above to test your code. I imported QtQuick.Controls and QtQuick.Controls.Styles.



  • @ibia
    I am running it separately only creating new project, but in my case its not updating. i have replaced applicationWindow.width with 300 as shown below.

    import QtQuick 2.5
    import QtQuick.Window 2.2
    import QtQuick.Extras 1.4
    import QtQuick.Controls.Styles 1.4
    import QtQuick.Controls 1.4
    
    Window {
        id: root
        visible: true
        width: 640
        height: 480
    
        Slider {
            id: theSlider
    
            property alias sliderWidth: theSlider.width
            property alias sliderValue: theSlider.value
    
            width:300
            maximumValue: 100
            minimumValue: 50
            value:minimumValue
            updateValueWhileDragging : true
            style: SliderStyle {
                groove:  Rectangle {
                    id: grooveMainrect
                    height: 8
                    radius: 5
                    color: "#847878"
                    Rectangle {
                        id: groovechildrect
                        width: (parent.width * theSlider.value)/theSlider.maximumValue
                        height: parent.height
                        color: Qt.lighter("#7ea6d6", 1.2)
                        radius: parent.radius
                    }
                }
                handle: Rectangle {
                    id:handlemainrect
                    height: 25
                    width: 25
                    radius: width/2
                    color: Qt.lighter("#7ea6d6", 1.2)
                    Rectangle {
                        id: handlechildrect
                        width: parent.width/3
                        height: parent.height/3
                        anchors.centerIn: parent
                        color: "#ffffff"
                        radius: width/2
                    }
                }
            }
        }
    }
    


  • Can you show a screenshot of the slider ?



  • @ibia i am not able to upload the screen shot.



  • Sorry! But, you will probably be more difficult to help if we do not have a screenshot of the problem.



  • @Naveen_D said in Regarding Slider in QML:

    @ibia i am not able to upload the screen shot.

    what is the reason y u cant upload?. it might help the users to provide looking into it.

    Thanks,



  • Hi, the issue is resolved( i am not sure), in the code i was assigning the minimum value as the slider value. Instead of giving minimum value as slider value, i changed the slider value separately, it is working fine. the slider handle is updating to the particular value.
    Thanks



  • Hi,

    @Naveen_D ,

    Good to hear u got the issue resolved, can u please mark the topic as solved, and if u can provide the code snippet, which is working it wiil be helpful for the users in Forum,

    Thanks,



  • ya sure @Pradeep-Kumar
    i just changed the slider value to 50 instead of assigning minimum value.
    working code :

        Slider{
            id:theslider
            anchors.centerIn: parent
            maximumValue: 100
            value: 50
            width: 250
            style: SliderStyle {
                groove: Rectangle{
                    id: grooveMainrect
                    height: 5
                    antialiasing: true
                    radius: 5
                    color: "#847878"
                    Rectangle {
                        id: groovechildrect
                        width: (parent.width * theslider.value)/theslider.maximumValue
                        height: parent.height
                        color: Qt.lighter("#7ea6d6", 1.2)
                        radius: parent.radius
                    }
                }
                handle: Rectangle{
                    id:handlemainrect
                    height: (handlechildrect.height/3)+2
                    width: (handlechildrect.width/3)+2
                    radius: handlechildrect.width/2
                    anchors.verticalCenter: parent.verticalCenter
                    color: Qt.lighter("#7ea6d6", 1.2)
                    Rectangle {
                        id: handlechildrect
                        width: 25
                        height: 25
                        anchors.centerIn: parent
                        color: "#ffffff"
                        radius: width/2
                        opacity: 0.5
                    }
                }
            }
        }
    

Log in to reply
 

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