Regarding Slider in QML

Naveen_D

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

ibia

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

Naveen_D

@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

ibia

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.

Naveen_D

@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
                }
            }
        }
    }
}

ibia

Can you show a screenshot of the slider ?

Naveen_D

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

ibia

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

Pradeep Kumar

@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,

Naveen_D

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

Pradeep Kumar

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,

Naveen_D

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

Meistermosher

Hey dear devs,
I've got a similar problem.
I'm following this tutorial: https://www.youtube.com/watch?v=aMEQji7Rwrg
but, when it comes to the slider-part I'm pretty lost.

My slider doesn't move when I try to customize the handle (otherwise it works fine).
What am I missing here?

import QtQuick 2.0
import QtQuick.Controls 2.15


Slider {
    id: temperatureControlSlider
    value: 25
    from: 16
    to: 35
    stepSize: 1

    orientation: Qt.Vertical

    background: Rectangle{
        height: parent.height
        width: 3
        anchors.centerIn: parent
    }
    handle: Rectangle {

        y: temperatureControlSlider.topPadding + temperatureControlSlider.visualPosition * (temperatureControlSlider.availableHeight - height)
        x: temperatureControlSlider.leftPadding + temperatureControlSlider.availableWidth / 2 - width / 2
        border.color: temperatureControlSlider.pressed ? "green" : "white"
        color: "black"
        border.width: 3
        width: 76
        height: 76
        radius: width / 2
    }
}

Any ideas? :(

Meistermosher

Ok I helped myself right now by creating a Rectangle and setting the anchor to the handle.
Then I rendered everything necessary on top.

    Rectangle{
        anchors.centerIn: handle
        z: 1
        width: 76
        height: 76
        radius: width / 2
        border.width: 3
        border.color: temperatureControlSlider.pressed ? "green" : "white"
        color: "black"

    }
    Text{
        anchors.centerIn: handle
        z: 1
        color: "red"
        font.pixelSize: 30
        text: temperatureControlSlider.value
    }
}

It's a bit strange because I found only solutions similar to my previous post. But maybe it's because of Qt6 or so.
You need to grab the handle (which is now "invisible") but yeah. It works x)