QML Slider Handle is not moving

I am having issues in moving a slider handle when I try to style "handle:Rectangle" ,Below is the code:

Slider {
    id: slider
    x: 372
    y: 70
    width: 33
    height: 457
    spacing: 0
    anchors.rightMargin: 395
    rotation: 0
    orientation: Qt.Vertical
    font.family: "Arial"
    value: 0.5
    anchors.right: parent.right

    background: Rectangle {
        anchors.centerIn: parent
        x: slider.topPadding + slider.availableWidth / 2 - width / 2
        y: slider.leftPadding
        implicitWidth: 200
        implicitHeight: 4
        width: slider.availableHeight
        height: implicitHeight
        radius: 2
        rotation: 90
        color: "#bdbebf"
    }

    handle: Rectangle {
        anchors.centerIn: parent
        color: slider.pressed ? "white" : "red"
        border.color: "gray"
        //border.width: 2
        width: 20
        height: 20
        radius: 6
    }
}

I am able to move the slider if i am not styling handle:Rectangle.

please Suggest.

That is, because you can't anchor it to the center. You need to specify the x and y values in dependance of the visualPosition.

See the example on how to customize a slider.

Be aware, that the customization provided there does not account for vertical sliders, so you need to adapt it:

y: slider.topPadding + slider.visualPosition * (slider.availableHeight - height)
x: slider.leftPadding + slider.availableWidth / 2 - width / 2

should do it for you. Remove the anchoring of course!