import QtQuick 1.0


Item {

    id: slider; width: 500; height: 25

   // value is read/write.
    property int value: 0
    onValueChanged: updatePos();
    property int maximum: 10000
    property int minimum: 0
    property int xMax: width - handle.width
    onXMaxChanged: updatePos();
    onMinimumChanged: updatePos();


    function updatePos() {
        var pos;
        if (maximum > minimum) {
            pos = (value * slider.xMax) / (maximum - minimum);
            //pos = Math.min(pos, width - handle.width);
            //pos = Math.max(pos, 0);
            handle.x = pos;
        } else {
            pos = (value * slider.xMax) / (minimum - maximum );

            handle.x = pos;
        }
        console.log("UpdatePos: "+handle.x)
    }


    Rectangle {
        anchors.centerIn: parent
        height: 6; width: 500
        border.color: "#707070"; border.width: 1
        color: "white"
        /*
        gradient: Gradient {
            GradientStop { position: 0.0; color: "gray" }
            GradientStop { position: 1.0; color: "#3B3B3B" }

        }
        */
        MouseArea{
            id: mou
            anchors.fill: parent
            onClicked: {
            console.log("MouseX "+mou.mouseX)
                var cliclPos = mou.mouseX-15
                if(cliclPos>450) cliclPos=450
               slider.value = ((slider.maximum - slider.minimum) * (cliclPos) / slider.xMax)
            }
        }
    }

    Rectangle {
        id: handle; smooth: true
        border.width: 1
        border.color: "gray"
        x: 0
        y: 0; width: 30; height: 25
        radius: 7
        color: "white"
        /*
        gradient: Gradient {
            GradientStop { position: 0.0; color: "#e70050" }
            GradientStop { position: 1.0; color: "#e60040" }
        }

        */
        MouseArea {
            id: mouse
            anchors.fill: parent; drag.target: parent
            drag.axis: Drag.XAxis; drag.minimumX: slider.minimum; drag.maximumX: slider.xMax

            onPositionChanged: {
                slider.value = ((slider.maximum - slider.minimum) * (handle.x) / slider.xMax)

            }

        }
    }
}