slider handle not centered on tickmarks

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

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
    }

---

Attachment 10700

Are you sure the tick marks are positioned correctly?

Quote:

---

Originally Posted by wysota

Are you sure the tick marks are positioned correctly?

---

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

Code:

---

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

---

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

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
            }
        }
        maximumValue: 80
        minimumValue: 1
        stepSize: 10
        tickmarksEnabled: true
        value: 40
    }

---

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?

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.