examples/QtQuick/qtvideoplayer/qml/videoplayer/Slider.qml

import QtQuick 1.0

Rectangle {
    id: container
    property alias position: slider.x
    signal sliderMoved
    height: 16

    radius: 8
    opacity: 0.7
    smooth: true
    gradient: Gradient {
        GradientStop { position: 0.0; color: "gray" }
        GradientStop { position: 1.0; color: "white" }
    }

    Rectangle {
        id: slider
        x: 1; y: 1; width: 30; height: 14
        radius: 6
        smooth: true
        gradient: Gradient {
            GradientStop { position: 0.0; color: "#424242" }
            GradientStop { position: 1.0; color: "black" }
        }

        MouseArea {
            anchors.fill: parent
            anchors.margins: -16 // Increase mouse area a lot outside the slider
            drag.target: parent; drag.axis: Drag.XAxis
            drag.minimumX: 0; drag.maximumX: container.width - 32
            onReleased: {
            container.sliderMoved();
            }
        }
    }
}

---