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

score 1 · Accepted Answer · answered Mar 08 '16 at 15:36

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

answered Mar 08 '16 at 15:36

Kamil Klimek

12,884
2
43
58

Thanks, it works like a charm. I guess i got confused with the documentation that doesn't point the reader to actually display all the tickmarks. Probably the only indication of that is the label 'tickmarkS'. – Waldez Junior Mar 08 '16 at 18:42
2

@WaldezJunior this patch improves the documentation: https://codereview.qt-project.org/#/c/151746/ - in general, feel free to suggest improvements at bugreports.qt.io. – Mitch Mar 08 '16 at 21:38
2

GJ @Mitch I remember I was struggling a little bit to understand how to use tickmarks. Thanks God sources are always there to help. :) – BaCaRoZzo Mar 09 '16 at 09:52

How to customize a QML Slider tickmark?

1 Answers1