slider handle not centered on tickmarks

[joko]

Did any one of you encountered this problem?

The Slider handle isn't centered on the tickmarks, it only displays correctly at the minimum and maximum value.

here's my code

Slider {
        id: slider
        anchors {
            fill: parent
            topMargin: 30
            horizontalCenter: parent.horizontalCenter
        }
        style: SliderStyle {
            groove: Rectangle {
                color: "white"
                implicitHeight: 8
                implicitWidth: parent.width
                radius: 6
                gradient: Gradient {
                    GradientStop { position: 0.0; color: "gray" }
                    GradientStop { position: 1.0; color: "white" }
                }
            }
            handle: Image {
                source: "../../images/mdpi/handle-slider.png"
                sourceSize.width: 30
                sourceSize.height: 30
                anchors {
                    centerIn: parent.Center
                }
            }
            tickmarks: tickMarks
 
           Component {
                id: tickMarks
                Repeater {
                    id: repeater
                    model: control.stepSize > 0 ? 1 + (control.maximumValue - control.minimumValue) / control.stepSize : 0
                    Rectangle {
                        color: "gray"
                        width: 2
                        height: (index % 2 == 0) ? 14 : 8
                        y: repeater.height
                        x: styleData.handleWidth / 2 + index * ((repeater.width - styleData.handleWidth) / (repeater.count-1))
                    }
                }
            }
        }
        maximumValue: 80
        minimumValue: 1
        stepSize: 10
        tickmarksEnabled: true
        value: 40
    }

Slider {
        id: slider
        anchors {
            fill: parent
            topMargin: 30
            horizontalCenter: parent.horizontalCenter
        }
        style: SliderStyle {
            groove: Rectangle {
                color: "white"
                implicitHeight: 8
                implicitWidth: parent.width
                radius: 6
                gradient: Gradient {
                    GradientStop { position: 0.0; color: "gray" }
                    GradientStop { position: 1.0; color: "white" }
                }
            }
            handle: Image {
                source: "../../images/mdpi/handle-slider.png"
                sourceSize.width: 30
                sourceSize.height: 30
                anchors {
                    centerIn: parent.Center
                }
            }
            tickmarks: tickMarks

           Component {
                id: tickMarks
                Repeater {
                    id: repeater
                    model: control.stepSize > 0 ? 1 + (control.maximumValue - control.minimumValue) / control.stepSize : 0
                    Rectangle {
                        color: "gray"
                        width: 2
                        height: (index % 2 == 0) ? 14 : 8
                        y: repeater.height
                        x: styleData.handleWidth / 2 + index * ((repeater.width - styleData.handleWidth) / (repeater.count-1))
                    }
                }
            }
        }
        maximumValue: 80
        minimumValue: 1
        stepSize: 10
        tickmarksEnabled: true
        value: 40
    }

To copy to clipboard, switch view to plain text mode 

slider.PNG

[wysota]

Are you sure the tick marks are positioned correctly?

[joko]

Are you sure the tick marks are positioned correctly?

Yes. When I used these lines of codes only it works perfectly.

Slider {
        id: slider
        anchors {
            fill: parent
            topMargin: 30
            horizontalCenter: parent.horizontalCenter
        }
        maximumValue: 80
        minimumValue: 1
        stepSize: 10
        tickmarksEnabled: true
        value: 40
    }

Slider {
        id: slider
        anchors {
            fill: parent
            topMargin: 30
            horizontalCenter: parent.horizontalCenter
        }
        maximumValue: 80
        minimumValue: 1
        stepSize: 10
        tickmarksEnabled: true
        value: 40
    }

To copy to clipboard, switch view to plain text mode 

However after adding the style property with SliderStyle component, the problem occurs.

Slider {
        id: slider
        anchors {
            fill: parent
            topMargin: 30
            horizontalCenter: parent.horizontalCenter
        }
        style: SliderStyle {
            groove: Rectangle {
                color: "white"
                implicitHeight: 8
                implicitWidth: parent.width
                radius: 6
            }
        }
        maximumValue: 80
        minimumValue: 1
        stepSize: 10
        tickmarksEnabled: true
        value: 40
    }

Slider {
        id: slider
        anchors {
            fill: parent
            topMargin: 30
            horizontalCenter: parent.horizontalCenter
        }
        style: SliderStyle {
            groove: Rectangle {
                color: "white"
                implicitHeight: 8
                implicitWidth: parent.width
                radius: 6
            }
        }
        maximumValue: 80
        minimumValue: 1
        stepSize: 10
        tickmarksEnabled: true
        value: 40
    }

To copy to clipboard, switch view to plain text mode 

[joko]

After doing some changes on the code, it seems that once the style property is overridden, the problem occurred if the implicitwidth property increases.
When the implicitWidth is from 200 or more, you will notice that the handle isn't centered in some tickmarks anymore.
However if without style, the default handle is always centered into tickmarks.

Any work around on this one?

[joko]

I managed to resolved the issue, by changing the minimumValue from 1 to 0 and in tickmarks component, i subtracted the Rectangle width from the repeater.width.