Qml applying animation and add text to Slider bar-CodePudding

I am learning Qml newly and i am trying to customize a slider as below

And i was unable to figure the part how to apply animation or color the slider with thick red when slider handle is being dragged and apply fade out animation to text in parallel when the slider handle is being dragged.

I tried with ColorAnimation to achieve the coloring slider when handler is dragging and text part not able to figure out.

Attaching the code that i tried to achieve the expectation

Slider{
                id:control

                background:  Rectangle{
                    x: control.leftPadding
                    y: control.topPadding   control.availableHeight / 2 - height / 2
                    implicitWidth: 331
                    implicitHeight: 68
                    width: control.availableWidth
                    height: implicitHeight
                    radius: 10
                    color: '#cc0000'
                    //opacity: 0.4
                    border.color: "#cc0000"

                    Rectangle{
                        width: control.visualPosition * parent.width
                        height: parent.height
                        color: "blue"
                        radius: 10
                    }
                }

                handle: Rectangle {
                    id: sliderHandle
                    property int fnValu : control.leftPadding    control.visualPosition * (control.availableWidth- width)
                    x: control.leftPadding    control.visualPosition * (control.availableWidth- width)
                    y: control.topPadding   control.availableHeight / 2 - height / 2
                    implicitHeight: 70
                    implicitWidth: 88
                    radius: 10

                    Text{
                        anchors.centerIn: parent
                        text: "SOS"
                    }
                    gradient: Gradient {
                        GradientStop { position: 1.0; color: '#990000' }
                        GradientStop { position: 0.0; color: '#cc0000' }

                    }
                }
            }

Attaching image of what i was able to achieve

What i achieved

If anyone now's how to render the text and apply fade out animation to the text when slider handle is being dragged, help is much appreciated.

Thanks in advance !!

CodePudding user response：

Regarding the animation on the fading out your text. You could do the following without even the need of an animation react to onPositionChanged of the slider and change the opacity property of the text. Edit: Adjusted my answer to your code changes.

            Slider{
                        id:control
                        onPositionChanged:{
                            backgroundText.opacity = 1-position
                        }

                        background:  Rectangle{
                            x: control.leftPadding
                            y: control.topPadding   control.availableHeight / 2 - height / 2
                            implicitWidth: 331
                            implicitHeight: 68
                            width: control.availableWidth
                            height: implicitHeight
                            radius: 10
                            color: '#cc0000'
                            //opacity: 0.4
                            border.color: "#cc0000"

                            Rectangle{
                                width: control.visualPosition * parent.width
                                height: parent.height
                                color: "blue"
                                radius: 10
                            }
                            Text{
                                id:backgroundText
                                text: "Slide to Send"
                                color:"black"
                                anchors{
                                    centerIn: parent
                                }
                            }
                        }

                        handle: Rectangle {
                            id: sliderHandle
                            property int fnValu : control.leftPadding    control.visualPosition * (control.availableWidth- width)
                            x: control.leftPadding    control.visualPosition * (control.availableWidth- width)
                            y: control.topPadding   control.availableHeight / 2 - height / 2
                            implicitHeight: 70
                            implicitWidth: 88
                            radius: 10

                            Text{
                                anchors.centerIn: parent
                                text: "SOS"
                            }
                            gradient: Gradient {
                                GradientStop { position: 1.0; color: '#990000' }
                                GradientStop { position: 0.0; color: '#cc0000' }

                            }
                        }
                    }