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

Qt Code:
  1. Slider {
  2. id: slider
  3. anchors {
  4. fill: parent
  5. topMargin: 30
  6. horizontalCenter: parent.horizontalCenter
  7. }
  8. style: SliderStyle {
  9. groove: Rectangle {
  10. color: "white"
  11. implicitHeight: 8
  12. implicitWidth: parent.width
  13. radius: 6
  14. gradient: Gradient {
  15. GradientStop { position: 0.0; color: "gray" }
  16. GradientStop { position: 1.0; color: "white" }
  17. }
  18. }
  19. handle: Image {
  20. source: "../../images/mdpi/handle-slider.png"
  21. sourceSize.width: 30
  22. sourceSize.height: 30
  23. anchors {
  24. centerIn: parent.Center
  25. }
  26. }
  27. tickmarks: tickMarks
  28.  
  29. Component {
  30. id: tickMarks
  31. Repeater {
  32. id: repeater
  33. model: control.stepSize > 0 ? 1 + (control.maximumValue - control.minimumValue) / control.stepSize : 0
  34. Rectangle {
  35. color: "gray"
  36. width: 2
  37. height: (index % 2 == 0) ? 14 : 8
  38. y: repeater.height
  39. x: styleData.handleWidth / 2 + index * ((repeater.width - styleData.handleWidth) / (repeater.count-1))
  40. }
  41. }
  42. }
  43. }
  44. maximumValue: 80
  45. minimumValue: 1
  46. stepSize: 10
  47. tickmarksEnabled: true
  48. value: 40
  49. }
To copy to clipboard, switch view to plain text mode 

slider.PNG