qml 自定义Slider，可以自己更改最大值和获取当前值，更改颜色

下面是一个基本的自定义Slider示例，可以更改最大值和获取当前值，并且可以更改滑块和进度条的颜色。

import QtQuick 2.14
import QtQuick.Controls 2.14

Item {
    property int minValue: 0
    property int maxValue: 100
    property int value: 50
    property color handleColor: "white"
    property color trackColor: "gray"
    property color progressColor: "blue"

    width: 200
    height: 30

    Rectangle {
        id: track
        width: parent.width
        height: 4
        color: trackColor
        radius: 2
        anchors.verticalCenter: parent.verticalCenter
    }

    Rectangle {
        id: progress
        width: (value - minValue) / (maxValue - minValue) * parent.width
        height: 4
        color: progressColor
        radius: 2
        anchors.verticalCenter: parent.verticalCenter
    }

    Rectangle {
        id: handle
        width: 16
        height: 16
        color: handleColor
        radius: 8
        anchors.centerIn: parent
        drag.target: parent

        Drag.active: parent.pressed
        Drag.axis: Drag.Horizontal
        Drag.minimumX: 0
        Drag.maximumX: parent.width - width

        onXChanged: {
            value = x / (parent.width - width) * (maxValue - minValue) + minValue
        }
    }

    Text {
        id: valueText
        text: value.toFixed(0)
        font.pixelSize: 12
        anchors.centerIn: handle
    }

    MouseArea {
        anchors.fill: parent
        onClicked: {
            var mouseX = mouse.x
            var percent = mouseX / parent.width
            value = percent * (maxValue - minValue) + minValue
            handle.x = percent * (parent.width - handle.width)
        }
    }
}

使用方法：

CustomSlider {
    minValue: 0
    maxValue: 100
    value: 50
    handleColor: "white"
    trackColor: "gray"
    progressColor: "blue"
}