在QT 5.6中自定义滑块(QML)

import QtQuick 2.6
import QtQuick.Controls 1.5

Item {
    id: customSlider
    width: 200
    height: 40

    property alias value: slider.value
    property alias minimumValue: slider.minimumValue
    property alias maximumValue: slider.maximumValue

    Rectangle {
        id: track
        width: parent.width
        height: 10
        radius: 5
        color: "#cccccc"
        anchors.verticalCenter: parent.verticalCenter
    }

    Rectangle {
        id: groove
        width: slider.visualPosition * track.width
        height: track.height
        radius: track.radius
        color: "#0078d7"
        anchors.verticalCenter: track.verticalCenter
    }

    Rectangle {
        id: handle
        width: 20
        height: 20
        radius: 10
        color: "#0078d7"
        border.color: "#ffffff"
        border.width: 2
        anchors.centerIn: parent
        x: slider.visualPosition * (track.width - handle.width)

        MouseArea {
            id: mouseArea
            anchors.fill: parent
            drag.target: parent
            drag.axis: Drag.XAxis
            drag.minimumX: 0
            drag.maximumX: track.width - handle.width

            onReleased: {
                slider.value = slider.minimumValue + (handle.x / (track.width - handle.width)) * (slider.maximumValue - slider.minimumValue)
            }
        }
    }

    Slider {
        id: slider
        width: track.width
        height: track.height
        minimumValue: 0
        maximumValue: 100
        value: 50
        visible: false
    }
}

import QtQuick 2.6
import QtQuick.Controls 1.5
import QtQuick.Window 2.2

Window {
    visible: true
    width: 400
    height: 300
    title: "Custom Slider Example"

    CustomSlider {
        id: mySlider
        anchors.centerIn: parent
        minimumValue: 0
        maximumValue: 100
        value: 50

        onValueChanged: {
            console.log("Slider value:", value)
        }
    }
}