How to customize a QML Slider tickmark?

Question

I'm trying to customize a QML slider component.

I'm aware of QML Slider and QML SliderStyle Type for QtQuickControl customization. And according to the documentation SliderStyle Doc I should be able to assign a component to the tickmarks property.

I tried to do this in the code below:

import QtQuick 2.3
import QtQuick.Controls 1.2
import QtQuick.Controls.Styles 1.2

Item{
    width: slid.width
    height: slid.height

property real maxValue: 5.0
property real minValue: 0.0
property real step: 1.0
property real sliderValue: 0

    Slider {
        id: slid
        anchors.centerIn: parent
        width: 800
        tickmarksEnabled: true
        maximumValue: maxValue
        minimumValue: minValue
        stepSize: step
        updateValueWhileDragging: true
        style: SliderStyle {
            groove: Image{
                    source: "images/sliderBG.png"
                    height: 32
                    width: 200
                }

            handle: Image{
                id: sliderHandle
                source: "images/sliderButtonUnpressed.png"
                width: 68
                height: 68
            }

            tickmarks: Text {
                id: ticks
                text: "|"
                font.family: "Myriad Pro"
                font.pointSize: 30
                color: "black"
                y: parent.y - 60
            }
        }

    }
}

But only one tickmark was displayed whenever I tried to use my slider, despite of the multiple slider steps.

I'm trying to avoid to have to write a QML component from scratch only because of the tickmarks. That said, is There something wrong on the way I'm assigning the tickmarks? Or is there another QML style I could try to customize? Or some other solution?

Thanks in advance, guys

Answer 1

default tickmarks value in QML Slider is:

property Component tickmarks: Repeater {
    id: repeater
    model: control.stepSize > 0 ? 1 + (control.maximumValue - control.minimumValue) / control.stepSize : 0
    Rectangle {
        color: "#777"
        width: 1 ; height: 3
        y: repeater.height
        x: styleData.handleWidth / 2 + index * ((repeater.width - styleData.handleWidth) / (repeater.count-1))
    }
}

Try using repeater around your Text component