如何根据Qt qml中滑块值的变化在QSlider上添加标记

Slider {
    id: slider
    minimumValue: 0
    maximumValue: 100
}

Rectangle {
    id: marker
    width: 10
    height: 10
    color: "red"
    visible: false
}

slider.onValueChanged: {
    var markerPosition = (slider.value - slider.minimumValue) / (slider.maximumValue - slider.minimumValue) * slider.width
    marker.x = markerPosition - marker.width / 2
    marker.visible = true
}

Item {
    width: 200
    height: 50
    
    Slider {
        id: slider
        anchors.centerIn: parent
        minimumValue: 0
        maximumValue: 100
        onValueChanged: {
            var markerPosition = (slider.value - slider.minimumValue) / (slider.maximumValue - slider.minimumValue) * slider.width
            marker.x = markerPosition - marker.width / 2
            marker.visible = true
        }
    }
    
    Rectangle {
        id: marker
        width: 10
        height: 10
        color: "red"
        visible: false
    }
}