Create Slider tickmarks in Qt6

Question

I have been trying to create tickmarks(numbers) to Slider in qt6, the tickmarks property is removed from qt6. Slider contains min max and stepsize value and on the basis of this data numbers should be there in slider. Probably easiest if you take Slider.qml from the used Controls style and add Repeater with a number of tick marks needed inside background component and let it create, for example, 1 pixel wide Rectangles with x coordinate being index*width/theNumberOfTickMarks. But I am not able to achieve it. Can anyone help me out with the code. Expectation is it should look something like this:

Slider with tickmarks numbers

Answer 1

You can set the Slider's background and handle to create a custom look. For tick marks, you can use Repeater based on from-to+1 to put integer spaced tickmarks:

import QtQuick
import QtQuick.Controls
import QtQuick.Layouts

Page {
    ColumnLayout {
        anchors.centerIn: parent
        CustomSlider {
            id: slider
            from: 1
            to: 9
            value: 5
            stepSize: 2
        }
        Frame {
            Layout.alignment: Qt.AlignHCenter
            Text {
                text: qsTr("Slider.value: %1").arg(slider.value)
            }
        }
    }
}

// CustomSlider.qml
import QtQuick
import QtQuick.Controls

Slider {
    from: 1
    to: 9
    value: 5
    implicitWidth: 500
    implicitHeight: 100
    width: implicitWidth
    height: implicitHeight
    snapMode: Slider.SnapOnRelease
    background: Item {
        x: leftPadding + 13
        y: topPadding + availableHeight / 2
        width: availableWidth - 26
        Repeater {
            model: (to - from) / stepSize + 1
            delegate: Column {
                x: index * parent.width / (to - from) * stepSize - width / 2
                y: 0
                spacing: 2
                Rectangle {
                    anchors.horizontalCenter: parent.horizontalCenter
                    width: 1
                    height: 10
                    color: "grey"
                }
                Text {
                    anchors.horizontalCenter: parent.horizontalCenter
                    text: index * stepSize + from
                }
            }
        }
        Rectangle {
            y: -height / 2
            width: parent.width
            height: 12
            color: "#eee"
            Rectangle {
                width: visualPosition * parent.width
                height: parent.height
                color: "#099"
            }
        }
    }
    handle: Rectangle {
        x: leftPadding + visualPosition * (availableWidth - width)
        y: topPadding + availableHeight / 2 - height / 2
        implicitWidth: 26
        implicitHeight: 26
        radius: 3
        color: pressed ? "#f0f0f0" : "#f6f6f6"
        border.color: "#bdbebf"
        Rectangle {
            x: parent.width / 2 - 2
            y: parent.height / 2 - height / 2
            width: 1
            height: parent.height / 3
            color: "#ccc"
        }
        Rectangle {
            x: parent.width / 2 + 2
            y: parent.height / 2 - height / 2
            width: 1
            height: parent.height / 3
            color: "#ccc"
        }
    }
}

You can Try it Online!

References:

• https://doc.qt.io/qt-6/qtquickcontrols2-customize.html#customizing-slider