Set color interactively with rgba(red, green, blue, alpha)

The example set background color interactively with rgba(red, green, blue, alpha).

qml example: rgba(red, green, blue, alpha)

import QtQuick 2.0

Rectangle {
    width: 360
    height: 360
    Text {
        anchors.centerIn: parent
        text: "Hello World"
    }

    /*
        rgba( real red, real green, real blue, real alpha )
        Returns a color with the specified red, green, blue and alpha
        components. All components should be in the range 0-1 inclusive.
    */
    color: Qt.rgba(
               mySliderHandleRed.x/(mySliderHandleRed.parent.width - 30),
               mySliderHandleGreen.x/(mySliderHandleGreen.parent.width - 30),
               mySliderHandleBlue.x/(mySliderHandleBlue.parent.width - 30),
               1)

    Rectangle {
        id: mySliderBlue

        anchors {
            left: parent.left
            right: parent.right
            bottom: parent.bottom
            leftMargin: 20
            rightMargin: 20
            bottomMargin: 10
        }

        height: 20
        radius: 10
        smooth: true
        gradient: Gradient {
            GradientStop { position: 0.0; color: "white" }
            GradientStop { position: 1.0; color: "gray" }
        }

        Rectangle {
            id: mySliderHandleBlue
            x: 1; y: 1; width: 30; height: 20
            radius: 10
            smooth: true
            color: "blue"

            MouseArea {
                anchors.fill: parent
                drag.target: parent
                drag.axis: Drag.XAxis
                drag.minimumX: 0
                drag.maximumX: parent.parent.width - 30
            }
        }
    }

    Rectangle {
        id: mySliderGreen

        anchors {
            left: parent.left
            right: parent.right
            bottom: mySliderBlue.top
            leftMargin: 20
            rightMargin: 20
            bottomMargin: 10
        }

        height: 20
        radius: 10
        smooth: true
        gradient: Gradient {
            GradientStop { position: 0.0; color: "white" }
            GradientStop { position: 1.0; color: "gray" }
        }

        Rectangle {
            id: mySliderHandleGreen
            x: 1; y: 1; width: 30; height: 20
            radius: 10
            smooth: true
            color: "green"

            MouseArea {
                anchors.fill: parent
                drag.target: parent
                drag.axis: Drag.XAxis
                drag.minimumX: 0
                drag.maximumX: parent.parent.width - 30
            }
        }
    }

    Rectangle {
        id: mySliderRed

        anchors {
            left: parent.left
            right: parent.right
            bottom: mySliderGreen.top
            leftMargin: 20
            rightMargin: 20
            bottomMargin: 10
        }

        height: 20
        radius: 10
        smooth: true
        gradient: Gradient {
            GradientStop { position: 0.0; color: "white" }
            GradientStop { position: 1.0; color: "gray" }
        }

        Rectangle {
            id: mySliderHandleRed
            x: 1; y: 1; width: 30; height: 20
            radius: 10
            smooth: true
            color: "red"

            MouseArea {
                anchors.fill: parent
                drag.target: parent
                drag.axis: Drag.XAxis
                drag.minimumX: 0
                drag.maximumX: parent.parent.width - 30
            }
        }
    }
}