Solved 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,
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 } } } }
-
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? :(
-
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)